fix(pro:search): item created by shortcut shoule be set active (#1554)

item created by shortcut shoule be set active after created and onItemCreate should be called
IDuxFE · May 18, 2023 · 31e433c · 31e433c
1 parent cbaea04
commit 31e433c
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 6 deletions.
diff --git a/packages/pro/search/src/components/quickSelect/QuickSelectItem.tsx b/packages/pro/search/src/components/quickSelect/QuickSelectItem.tsx
@@ -9,7 +9,7 @@ import type { SearchState } from '../../composables/useSearchStates'
 
 import { computed, defineComponent, inject, normalizeClass, ref, watch } from 'vue'
 
-import { useState } from '@idux/cdk/utils'
+import { callEmit, useState } from '@idux/cdk/utils'
 import { type IconInstance, IxIcon } from '@idux/components/icon'
 import { IxInput } from '@idux/components/input'
 
@@ -20,7 +20,9 @@ export default defineComponent({
   props: quickSelectPanelItemProps,
   setup(props, { slots }) {
     const {
+      props: proSearchProps,
       mergedPrefixCls,
+      convertStateToValue,
       createSearchState,
       getSearchStatesByFieldKey,
       updateSegmentValue,
@@ -67,6 +69,10 @@ export default defineComponent({
         searchStateKey = createSearchState(props.searchField.key, {
           value,
         })!.key
+        callEmit(proSearchProps.onItemCreate, {
+          ...convertStateToValue(searchStateKey),
+          nameInput: props.searchField.label,
+        })
       } else if (searchDataSegment.value?.name) {
         updateSegmentValue(value, searchDataSegment.value.name, searchState.value.key)
       }

diff --git a/packages/pro/search/src/components/quickSelect/QuickSelectShortcut.tsx b/packages/pro/search/src/components/quickSelect/QuickSelectShortcut.tsx
@@ -7,6 +7,7 @@
 
 import { defineComponent, inject } from 'vue'
 
+import { callEmit } from '@idux/cdk/utils'
 import { IxIcon } from '@idux/components/icon'
 
 import { proSearchContext } from '../../token'
@@ -15,14 +16,34 @@ import { quickSelectPanelShortcutProps } from '../../types'
 export default defineComponent({
   props: quickSelectPanelShortcutProps,
   setup(props) {
-    const { mergedPrefixCls, createSearchState, updateSearchState, getSearchStatesByFieldKey } =
-      inject(proSearchContext)!
+    const {
+      props: proSearchProps,
+      mergedPrefixCls,
+      convertStateToValue,
+      createSearchState,
+      updateSearchState,
+      getSearchStatesByFieldKey,
+      setActiveSegment,
+    } = inject(proSearchContext)!
 
     const handleClick = () => {
       const fieldKey = props.searchField.key
-      if (!!props.searchField.multiple || !getSearchStatesByFieldKey(fieldKey).length) {
-        const state = createSearchState(props.searchField.key)
-        state && updateSearchState(state.key)
+      if (!props.searchField.multiple && getSearchStatesByFieldKey(fieldKey).length) {
+        return
+      }
+
+      const state = createSearchState(props.searchField.key)
+
+      if (state) {
+        updateSearchState(state.key)
+        callEmit(proSearchProps.onItemCreate, {
+          ...convertStateToValue(state.key),
+          nameInput: props.searchField.label,
+        })
+        setActiveSegment({
+          itemKey: state.key,
+          name: state.segmentValues[0]?.name,
+        })
       }
     }