fix(comp:select): can't select other options when there are input val…

…ues (#1387)
IDuxFE · Jan 6, 2023 · 59fc80e · 59fc80e
1 parent 847f139
commit 59fc80e
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 9 deletions.
diff --git a/packages/components/select/src/Select.tsx b/packages/components/select/src/Select.tsx
@@ -78,10 +78,13 @@ export default defineComponent({
     const { activeValue, setActiveValue } = useActiveState(props, inputValue)
 
     const handleKeyDown = useKeyboardEvents(
+      inputValue,
+      selectedValue,
       computed(() => !!props.multiple),
       activeValue,
       changeActiveIndex,
       changeSelected,
+      handleRemove,
       clearInput,
       setOverlayOpened,
     )
@@ -99,6 +102,7 @@ export default defineComponent({
       if (props.multiple) {
         clearInput()
       } else {
+        props.allowInput && clearInput()
         setOverlayOpened(false)
       }
     }

diff --git a/packages/components/select/src/composables/useActiveState.ts b/packages/components/select/src/composables/useActiveState.ts
@@ -7,7 +7,7 @@
 
 import type { SelectProps } from '../types'
 
-import { type ComputedRef, watchEffect } from 'vue'
+import { type ComputedRef, watch } from 'vue'
 
 import { useState } from '@idux/cdk/utils'
 
@@ -22,13 +22,19 @@ export function useActiveState(props: SelectProps, inputValue: ComputedRef<strin
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [activeValue, setActiveValue] = useState<any>(undefined)
 
-  watchEffect(() => {
-    if (!props.allowInput || !inputValue.value) {
-      return
-    }
-
-    setActiveValue(inputValue.value)
-  })
+  watch(
+    inputValue,
+    value => {
+      if (!props.allowInput || !value) {
+        return
+      }
+
+      setActiveValue(value)
+    },
+    {
+      immediate: true,
+    },
+  )
 
   return {
     activeValue,

diff --git a/packages/components/select/src/composables/useKeyboardEvents.ts b/packages/components/select/src/composables/useKeyboardEvents.ts
@@ -11,10 +11,13 @@ import type { ComputedRef } from 'vue'
 import { isNil } from 'lodash-es'
 
 export function useKeyboardEvents(
+  inputValue: ComputedRef<string>,
+  selectedValue: ComputedRef<VKey[]>,
   isMultiple: ComputedRef<boolean>,
   activeValue: ComputedRef<VKey>,
   changeActiveIndex: (offset: number) => void,
   changeSelected: (key: VKey) => void,
+  handleRemove: (key: VKey) => void,
   clearInput: () => void,
   setOverlayOpened: (opened: boolean) => void,
 ): (evt: KeyboardEvent) => void {
@@ -32,7 +35,15 @@ export function useKeyboardEvents(
         evt.preventDefault()
         const key = activeValue.value
         !isNil(key) && changeSelected(key)
-        isMultiple.value ? clearInput() : setOverlayOpened(false)
+        clearInput()
+        !isMultiple.value && setOverlayOpened(false)
+        break
+      }
+      case 'Backspace': {
+        const selectedLength = selectedValue.value.length
+        if (!inputValue.value && selectedLength) {
+          handleRemove(selectedValue.value[selectedLength - 1])
+        }
         break
       }
       case 'Escape':