fix(pro:search): quickselect search input shouldn't hide when option …

…selected (#1883)
IDuxFE · Apr 8, 2024 · e9d8517 · e9d8517
1 parent c6eef62
commit e9d8517
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 11 deletions.
diff --git a/packages/pro/search/src/components/quickSelect/QuickSelectItem.tsx b/packages/pro/search/src/components/quickSelect/QuickSelectItem.tsx
@@ -34,20 +34,18 @@ export default defineComponent({
       updateSearchValues,
       getCacheData,
       setCacheData,
-      tempSegmentInputRef,
     } = inject(proSearchContext)!
 
     const searchInputRef = ref<HTMLInputElement>()
     const searchIconRef = ref<IconInstance>()
 
     const [searchInput, setSearchInput] = useState('')
-    const [searchInputOpend, _setSearchInputOpened] = useState(false)
     const setSearchInputOpened = (opened: boolean) => {
-      _setSearchInputOpened(opened)
       if (opened) {
         searchInputRef.value?.focus()
+        props.setSearchInputActive?.(true)
       } else {
-        tempSegmentInputRef.value?.focus()
+        props.setSearchInputActive?.(false)
       }
     }
 
@@ -67,7 +65,7 @@ export default defineComponent({
       const prefixCls = `${mergedPrefixCls.value}-quick-select-item-search-bar`
       return normalizeClass({
         [prefixCls]: true,
-        [`${prefixCls}-opened`]: searchInputOpend.value,
+        [`${prefixCls}-opened`]: props.searchInputActive,
       })
     })
 
@@ -81,6 +79,14 @@ export default defineComponent({
 
     const [itemValue, setItemValue] = useState<unknown>(searchDataSegmentState.value?.value)
     watch(() => searchDataSegmentState.value?.value, setItemValue)
+    watch(
+      () => props.searchInputActive,
+      active => {
+        if (!active) {
+          setSearchInput('')
+        }
+      },
+    )
 
     const confirmValue = (value: unknown) => {
       let searchStateKey = searchState.value?.key
@@ -114,16 +120,21 @@ export default defineComponent({
     const setOnKeyDown = () => {}
 
     const handleBlur = () => {
-      setSearchInput('')
       setSearchInputOpened(false)
     }
     const handleSearchIconClick = () => {
-      setSearchInputOpened(!searchInputOpend.value)
+      setSearchInputOpened(!props.searchInputActive)
     }
     const handleSearchIconMouseDown = (evt: MouseEvent) => {
       evt.preventDefault()
       evt.stopImmediatePropagation()
     }
+    const handleContentMouseDown = (evt: MouseEvent) => {
+      if (props.searchInputActive) {
+        evt.preventDefault()
+        evt.stopImmediatePropagation()
+      }
+    }
 
     return () => {
       const prefixCls = `${mergedPrefixCls.value}-quick-select-item`
@@ -167,7 +178,7 @@ export default defineComponent({
               </div>
             )}
           </div>
-          <div class={`${prefixCls}-content`}>
+          <div class={`${prefixCls}-content`} onMousedown={handleContentMouseDown}>
             {searchDataSegment.value?.panelRenderer?.({
               slots,
               input: searchInput.value,

diff --git a/packages/pro/search/src/components/quickSelect/QuickSelectPanel.tsx b/packages/pro/search/src/components/quickSelect/QuickSelectPanel.tsx
@@ -7,9 +7,11 @@
 
 import type { ResolvedSearchField } from '../../types'
 
-import { type VNodeChild, computed, defineComponent, inject } from 'vue'
+import { type VNodeChild, computed, defineComponent, inject, watch } from 'vue'
 
-import { isEmptyNode } from '@idux/cdk/utils'
+import { isNil } from 'lodash-es'
+
+import { type VKey, isEmptyNode, useState } from '@idux/cdk/utils'
 
 import QuickSelectPanelItem from './QuickSelectItem'
 import QuickSelectPanelShortcut from './QuickSelectShortcut'
@@ -37,6 +39,27 @@ export default defineComponent({
       }
     })
 
+    const [inputActiveFieldKey, setInputActiveFieldKey] = useState<VKey | undefined>(undefined)
+    const setInputActive = (key: VKey, active: boolean) => {
+      if (active) {
+        setInputActiveFieldKey(key)
+      } else if (inputActiveFieldKey.value === key) {
+        setInputActiveFieldKey(undefined)
+        tempSegmentInputRef.value?.focus()
+      }
+    }
+
+    watch(separatedFields, fields => {
+      const { quickSelectFields } = fields
+
+      if (
+        !isNil(inputActiveFieldKey.value) &&
+        quickSelectFields.findIndex(field => field.key === inputActiveFieldKey.value) < 0
+      ) {
+        setInputActiveFieldKey(undefined)
+      }
+    })
+
     const handleMouseDown = (evt: MouseEvent) => {
       if (!(evt.target instanceof HTMLInputElement)) {
         evt.preventDefault()
@@ -71,7 +94,16 @@ export default defineComponent({
           {separatedFields.value.quickSelectFields.length && (
             <div class={`${prefixCls}-items`}>
               {separatedFields.value.quickSelectFields.map((field, idx) => {
-                const nodes = [<QuickSelectPanelItem searchField={field} v-slots={slots} />]
+                const nodes = [
+                  <QuickSelectPanelItem
+                    searchField={field}
+                    searchInputActive={inputActiveFieldKey.value === field.key}
+                    setSearchInputActive={(active: boolean) => {
+                      setInputActive(field.key, active)
+                    }}
+                    v-slots={slots}
+                  />,
+                ]
 
                 if (idx < separatedFields.value.quickSelectFields.length - 1) {
                   nodes.push(<div class={`${prefixCls}-item-separator`}></div>)

diff --git a/packages/pro/search/src/types/quickSelectPanel.ts b/packages/pro/search/src/types/quickSelectPanel.ts
@@ -11,6 +11,8 @@ import type { DefineComponent, HTMLAttributes, PropType } from 'vue'
 
 export const quickSelectPanelItemProps = {
   searchField: { type: Object as PropType<ResolvedSearchField>, required: true },
+  searchInputActive: Boolean,
+  setSearchInputActive: Function as PropType<(active: boolean) => void>,
 } as const
 
 export const quickSelectPanelShortcutProps = {