Skip to content

Commit 24c6595

Browse files
committed
feat: make select like input/suggestions require submission
- The suggestions component now shows the suggestions when there is one matching suggestion. - The input now doesn't change the modelValue when restrictToSuggestions is true. The user must hit enter to submit.
1 parent a6612fe commit 24c6595

File tree

2 files changed

+8
-12
lines changed

2 files changed

+8
-12
lines changed

src/components/LibInput/LibInput.vue

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -269,6 +269,9 @@ const inputProps = computed(() => ({
269269
inputValue.value = e
270270
},
271271
onSubmit: (e: string) => {
272+
if (!props.restrictToSuggestions) {
273+
$modelValue.value = e
274+
}
272275
isOpen.value = false
273276
emit("submit", e)
274277
},
@@ -301,14 +304,14 @@ const suggestionProps = computed(() => ({
301304
inputValue: inputValue.value,
302305
canOpen: canOpen.value,
303306
onSubmit: (e: string) => {
307+
$modelValue.value = e
304308
canOpen.value = false
305309
emit("submit", e)
306310
},
307311
"onUpdate:isOpen": (e: boolean) => { isOpen.value = e },
308312
"onUpdate:isValid": updateIsValid,
309313
"onUpdate:activeSuggestions": (e: number) => activeSuggestion.value = e,
310314
"onUpdate:inputValue": (e: string) => inputValue.value = e,
311-
"onUpdate:modelValue": (e: string) => $modelValue.value = e,
312315
...$.value.suggestionsAttrs,
313316
class: undefined,
314317
}))
@@ -346,7 +349,7 @@ type RealProps =
346349
interface Props
347350
extends
348351
/** @vue-ignore */
349-
Partial<Omit<InputHTMLAttributes,"class" | "readonly" | "disabled"> & TailwindClassProp>,
352+
Partial<Omit<InputHTMLAttributes,"class" | "readonly" | "disabled" | "onSubmit"> & TailwindClassProp>,
350353
/** @vue-ignore */
351354
Partial<WrapperTypes>,
352355
RealProps { }

src/components/LibSuggestions/LibSuggestions.vue

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -153,16 +153,9 @@ const fullSuggestionsList = computed(() => {
153153
const openable = computed(() =>
154154
props.canOpen && (
155155
(isBlank($inputValue.value) && props.allowOpenEmpty) ||
156-
moreThanOneSuggestionAvailable.value ||
157-
(
158-
!exactlyMatchingSuggestion.value &&
159-
suggestionAvailable.value
160-
) ||
161-
(
162-
!isValidSuggestion.value &&
163-
suggestionAvailable.value
164-
)
165-
),
156+
suggestionAvailable.value
157+
158+
)
166159
)
167160
168161

0 commit comments

Comments
 (0)