mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-03 12:37:42 +08:00
fix: auto-complete placeholder issue #1761
This commit is contained in:
parent
5fb7ac8b58
commit
cda69c6663
@ -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',
|
||||
});
|
||||
},
|
||||
|
@ -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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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>
|
||||
|
@ -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',
|
||||
|
@ -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"> </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"> </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>
|
||||
|
@ -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"> </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"> </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>
|
||||
|
Loading…
Reference in New Issue
Block a user