fix: auto-complete placeholder issue #1761

Author: tangjinzhou

components/auto-complete/InputElement.jsx

@@ -18,6 +18,7 @@ export default {
   props: {
     value: PropTypes.any,
     disabled: PropTypes.bool,
+    placeholder: PropTypes.string,
   },
   methods: {
     focus() {
@@ -31,7 +32,7 @@ export default {
   },
 
   render() {
-    const { $slots = {}, $attrs = {} } = this;
+    const { $slots = {}, $attrs = {}, placeholder } = this;
     const listeners = getListeners(this);
     const props = getOptionProps(this);
     const value = props.value === undefined ? '' : props.value;
@@ -43,14 +44,20 @@ export default {
     for (const [eventName, event] of Object.entries(listeners)) {
       newEvent[eventName] = chaining(event, events[eventName]);
     }
-
+    const attrs = { ...$attrs, value };
+    // https://github.com/vueComponent/ant-design-vue/issues/1761
+    delete props.placeholder;
+    if (placeholder) {
+      props.placeholder = placeholder;
+      attrs.placeholder = placeholder;
+    }
     return cloneElement(children, {
       domProps: {
         value,
       },
       props,
       on: newEvent,
-      attrs: { ...$attrs, value },
+      attrs,
       ref: 'ele',
     });
   },

components/auto-complete/__tests__/__snapshots__/demo.test.js.snap

@@ -4,10 +4,9 @@ exports[`renders ./components/auto-complete/demo/basic.md correctly 1`] = `
 <div tabindex="0" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
   <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
     <div class="ant-select-selection__rendered">
-      <div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">input here</div>
       <ul>
         <li class="ant-select-search ant-select-search--inline">
-          <div class="ant-select-search__field__wrap"><input type="text" value="" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
+          <div class="ant-select-search__field__wrap"><input placeholder="input here" type="text" value="" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
         </li>
       </ul>
     </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
@@ -20,10 +19,9 @@ exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1
   <div tabindex="0" class="certain-category-search ant-select ant-select-combobox ant-select-enabled ant-select-lg ant-select-lg ant-select-show-search ant-select-auto-complete" style="width: 100%;">
     <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
       <div class="ant-select-selection__rendered">
-        <div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">input here</div>
         <ul>
           <li class="ant-select-search ant-select-search--inline">
-            <div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field"><input type="text" value="" class="ant-input"><span class="ant-input-suffix"><i slot="suffix" aria-label="icon: search" class="certain-category-icon anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i></span></span><span class="ant-select-search__field__mirror">&nbsp;</span></div>
+            <div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field"><input placeholder="input here" type="text" value="" class="ant-input"><span class="ant-input-suffix"><i slot="suffix" aria-label="icon: search" class="certain-category-icon anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i></span></span><span class="ant-select-search__field__mirror">&nbsp;</span></div>
           </li>
         </ul>
       </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
@@ -50,10 +48,9 @@ exports[`renders ./components/auto-complete/demo/non-case-sensitive.md correctly
 <div tabindex="0" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
   <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
     <div class="ant-select-selection__rendered">
-      <div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">input here</div>
       <ul>
         <li class="ant-select-search ant-select-search--inline">
-          <div class="ant-select-search__field__wrap"><input type="text" value="" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
+          <div class="ant-select-search__field__wrap"><input placeholder="input here" type="text" value="" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
         </li>
       </ul>
     </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
@@ -65,10 +62,9 @@ exports[`renders ./components/auto-complete/demo/options.md correctly 1`] = `
 <div tabindex="0" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
   <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
     <div class="ant-select-selection__rendered">
-      <div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">input here</div>
       <ul>
         <li class="ant-select-search ant-select-search--inline">
-          <div class="ant-select-search__field__wrap"><input type="text" value="" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
+          <div class="ant-select-search__field__wrap"><input placeholder="input here" type="text" value="" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
         </li>
       </ul>
     </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
@@ -81,10 +77,9 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
   <div tabindex="0" class="global-search ant-select ant-select-combobox ant-select-enabled ant-select-lg ant-select-lg ant-select-show-search ant-select-auto-complete" style="width: 100%;">
     <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
       <div class="ant-select-selection__rendered">
-        <div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">input here</div>
         <ul>
           <li class="ant-select-search ant-select-search--inline">
-            <div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field"><input type="text" value="" class="ant-input"><span class="ant-input-suffix"><button type="button" class="search-btn ant-btn ant-btn-primary ant-btn-lg"><i aria-label="icon: search" class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i></button></span></span><span class="ant-select-search__field__mirror">&nbsp;</span></div>
+            <div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field"><input placeholder="input here" type="text" value="" class="ant-input"><span class="ant-input-suffix"><button type="button" class="search-btn ant-btn ant-btn-primary ant-btn-lg"><i aria-label="icon: search" class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i></button></span></span><span class="ant-select-search__field__mirror">&nbsp;</span></div>
           </li>
         </ul>
       </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>

components/auto-complete/index.jsx

@@ -72,10 +72,10 @@ const AutoComplete = {
     },
 
     getInputElement() {
-      const { $slots } = this;
+      const { $slots, placeholder } = this;
       const children = filterEmpty($slots.default);
       const element = children.length ? children[0] : <Input lazy={false} />;
-      return <InputElement>{element}</InputElement>;
+      return <InputElement placeholder={placeholder}>{element}</InputElement>;
     },
 
     focus() {
@@ -134,6 +134,7 @@ const AutoComplete = {
         optionLabelProp,
         getInputElement: this.getInputElement,
         notFoundContent: getComponentFromProp(this, 'notFoundContent'),
+        placeholder: '',
       },
       class: cls,
       ref: 'select',

components/form/__tests__/__snapshots__/demo.test.js.snap

@@ -416,7 +416,7 @@ exports[`renders ./components/form/demo/register.vue correctly 1`] = `
   <div class="ant-row ant-form-item">
     <div class="ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_website" title="Website" class="ant-form-item-required">Website</label></div>
     <div class="ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" data-__meta="[object Object]" data-__field="[object Object]" id="register_website"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">website</div><ul><li class="ant-select-search ant-select-search--inline"><div class="ant-select-search__field__wrap"><input type="text" value="" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" data-__meta="[object Object]" data-__field="[object Object]" id="register_website"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><ul><li class="ant-select-search ant-select-search--inline"><div class="ant-select-search__field__wrap"><input placeholder="website" type="text" value="" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
       </li>
       </ul>
     </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>

components/input/__tests__/__snapshots__/demo.test.js.snap

@@ -37,10 +37,9 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
 <div tabindex="0" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
   <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
     <div class="ant-select-selection__rendered">
-      <div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Email</div>
       <ul>
         <li class="ant-select-search ant-select-search--inline">
-          <div class="ant-select-search__field__wrap"><input type="text" value="" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
+          <div class="ant-select-search__field__wrap"><input placeholder="Email" type="text" value="" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
         </li>
       </ul>
     </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>