diff --git a/docs/api/props.md b/docs/api/props.md index 6dcccec93..27098dcde 100644 --- a/docs/api/props.md +++ b/docs/api/props.md @@ -502,6 +502,20 @@ resetOnOptionsChange: { }, ``` +## retainTextOnClick + +When true, the selected option text will not clear when the user clicks on the component. The search text will automatically be selected. + +```js +/** +* Whether to retain the text in the search input when the user +* clicks on the dropdown. +*/ +retainTextOnClick: { + type: Boolean, + default: false, +} +``` ## searchable diff --git a/src/components/Select.vue b/src/components/Select.vue index a4efc86e2..3cbdb80be 100644 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -668,6 +668,14 @@ export default { type: [String, Number], default: () => uniqueId(), }, + /** + * Whether to retain the text in the search input when the user + * clicks on the dropdown. + */ + retainTextOnClick: { + type: Boolean, + default: false, + } }, data() { @@ -1113,6 +1121,14 @@ export default { } else if (!this.disabled) { this.open = true this.searchEl.focus() + if (this.value !== null && this.retainTextOnClick) { + this.search = this.getOptionLabel(this.value) + /** + * 0-second setTimeout to force this event to the end of the callback queue and + * ensure that the select event is called last. + */ + setTimeout(() => this.searchEl.select(), 0) + } } },