diff --git a/docs/en-US/component/select-v2.md b/docs/en-US/component/select-v2.md index c00ca454c9..5763ee65df 100644 --- a/docs/en-US/component/select-v2.md +++ b/docs/en-US/component/select-v2.md @@ -121,7 +121,7 @@ select-v2/custom-footer Create and select new items that are not included in select options -By using the `allow-create` attribute, users can create new items by typing in the input box. Note that for `allow-create` to work, `filterable` must be `true`. +By using the `allow-create` attribute, users can create new items by typing in the input box. Note that for `allow-create` to work, `filterable` must be `true`. This example also demonstrates `default-first-option`. When this attribute is set to `true`, you can select the first option in the current option list by hitting enter without having to navigate with mouse or arrow keys. :::tip @@ -250,6 +250,7 @@ select-v2/custom-width | loading | whether Select is loading data from server | ^[boolean] | false | | loading-text | displayed text while loading data from server, default is 'Loading' | ^[string] | — | | reserve-keyword | whether reserve the keyword after select filtered option. | ^[boolean] | true | +| default-first-option | select first matching option on enter key. Use with `filterable` or `remote` | ^[boolean] | false | | no-match-text | displayed text when no data matches the filtering query, you can also use slot `empty`, default is 'No matching data' | ^[string] | — | | no-data-text | displayed text when there is no options, you can also use slot empty | ^[string] | No Data | | popper-class | custom class name for Select's dropdown | ^[string] | '' | diff --git a/docs/examples/select-v2/allow-create.vue b/docs/examples/select-v2/allow-create.vue index 110e201de6..28b0a9a61f 100644 --- a/docs/examples/select-v2/allow-create.vue +++ b/docs/examples/select-v2/allow-create.vue @@ -7,6 +7,7 @@ placeholder="Please select" style="width: 240px; margin-right: 16px; vertical-align: middle" allow-create + default-first-option filterable multiple clearable @@ -17,6 +18,7 @@ placeholder="Please select" style="width: 240px; vertical-align: middle" allow-create + default-first-option filterable clearable /> @@ -31,6 +33,7 @@ placeholder="Please select" style="width: 240px; margin-right: 16px; vertical-align: middle" allow-create + default-first-option filterable multiple clearable diff --git a/packages/components/select-v2/src/useSelect.ts b/packages/components/select-v2/src/useSelect.ts index cd23b26456..f9e36e1045 100644 --- a/packages/components/select-v2/src/useSelect.ts +++ b/packages/components/select-v2/src/useSelect.ts @@ -430,7 +430,9 @@ const useSelect = (props: ISelectV2Props, emit: SelectEmitFn) => { expanded.value = true } createNewOption(states.inputValue) - handleQueryChange(states.inputValue) + nextTick(() => { + handleQueryChange(states.inputValue) + }) } const debouncedOnInputChange = lodashDebounce(onInputChange, debounce.value)