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.

Author: AlansCodeLog

src/components/LibInput/LibInput.vue

@@ -269,6 +269,9 @@ const inputProps = computed(() => ({
 		inputValue.value = e
 	},
 	onSubmit: (e: string) => {
+		if (!props.restrictToSuggestions) {
+			$modelValue.value = e
+		}
 		isOpen.value = false
 		emit("submit", e)
 	},
@@ -301,14 +304,14 @@ const suggestionProps = computed(() => ({
 	inputValue: inputValue.value,
 	canOpen: canOpen.value,
 	onSubmit: (e: string) => {
+		$modelValue.value = e
 		canOpen.value = false
 		emit("submit", e)
 	},
 	"onUpdate:isOpen": (e: boolean) => { isOpen.value = e },
 	"onUpdate:isValid": updateIsValid,
 	"onUpdate:activeSuggestions": (e: number) => activeSuggestion.value = e,
 	"onUpdate:inputValue": (e: string) => inputValue.value = e,
-	"onUpdate:modelValue": (e: string) => $modelValue.value = e,
 	...$.value.suggestionsAttrs,
 	class: undefined,
 }))
@@ -346,7 +349,7 @@ type RealProps =
 interface Props
 	extends
 	/** @vue-ignore */
-	Partial<Omit<InputHTMLAttributes,"class" | "readonly" | "disabled"> & TailwindClassProp>,
+	Partial<Omit<InputHTMLAttributes,"class" | "readonly" | "disabled" | "onSubmit"> & TailwindClassProp>,
 	/** @vue-ignore */
 	Partial<WrapperTypes>,
 	RealProps { }

src/components/LibSuggestions/LibSuggestions.vue

@@ -153,16 +153,9 @@ const fullSuggestionsList = computed(() => {
 const openable = computed(() =>
 	props.canOpen && (
 		(isBlank($inputValue.value) && props.allowOpenEmpty) ||
-		moreThanOneSuggestionAvailable.value ||
-		(
-			!exactlyMatchingSuggestion.value &&
-			suggestionAvailable.value
-		) ||
-		(
-			!isValidSuggestion.value &&
-			suggestionAvailable.value
-		)
-	),
+		suggestionAvailable.value
+
+	)
 )