diff --git a/packages/pro/search/src/components/quickSelect/QuickSelectItem.tsx b/packages/pro/search/src/components/quickSelect/QuickSelectItem.tsx index 51e1be23e..e7c8bae0f 100644 --- 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() const searchIconRef = ref() 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(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({ )} -
+
{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 index f6c47537a..92652f78e 100644 --- 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(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 && (
{separatedFields.value.quickSelectFields.map((field, idx) => { - const nodes = [] + const nodes = [ + { + setInputActive(field.key, active) + }} + v-slots={slots} + />, + ] if (idx < separatedFields.value.quickSelectFields.length - 1) { nodes.push(
) diff --git a/packages/pro/search/src/types/quickSelectPanel.ts b/packages/pro/search/src/types/quickSelectPanel.ts index 98061bbc3..d86437d19 100644 --- 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, required: true }, + searchInputActive: Boolean, + setSearchInputActive: Function as PropType<(active: boolean) => void>, } as const export const quickSelectPanelShortcutProps = {