feat(select): 新增带搜索情况下，点击叉号按钮时下拉框同时清空(#2945)

.changeset/healthy-needles-cheer.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/select": minor
+---
+
+feat: 新增带搜索情况下，点击叉号按钮时下拉框同时清空

.changeset/ten-countries-kick.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(select): 新增带搜索情况下，点击叉号按钮时下拉框同时清空

packages/ui/picker/src/Picker.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useState } from 'react'
+import React, { forwardRef, useCallback, useImperativeHandle, useState } from 'react'
 import { cx, getPrefixCls } from '@hi-ui/classname'
 import { __DEV__ } from '@hi-ui/env'
 import { HiBaseHTMLFieldProps, useLocaleContext } from '@hi-ui/core'
@@ -48,6 +48,7 @@ export const Picker = forwardRef<HTMLDivElement | null, PickerProps>(
       trigger,
       footer,
       onOverlayScroll,
+      innerRef,
       ...rest
     },
     ref
@@ -72,7 +73,6 @@ export const Picker = forwardRef<HTMLDivElement | null, PickerProps>(
       onSearch,
       Object.is
     )
-
     // const inSearch = searchable && !!searchValue
     // const isEmpty = inSearch && showEmpty
     const resetSearchOnClosed = keywordProp === undefined
@@ -141,6 +141,12 @@ export const Picker = forwardRef<HTMLDivElement | null, PickerProps>(
 
     const cls = cx(prefixCls, className, `${prefixCls}--${menuVisible ? 'open' : 'closed'}`)
 
+    useImperativeHandle(innerRef, () => ({
+      resetSearch: () => {
+        resetSearchOnClosed && resetSearch()
+      },
+    }))
+
     return (
       <div
         ref={ref}
@@ -304,6 +310,10 @@ export interface PickerProps extends HiBaseHTMLFieldProps<'div'> {
    * 开启内容区域可滚动
    */
   scrollable?: boolean
+  /**
+   * 提供辅助方法的内部引用
+   */
+  innerRef?: React.Ref<HTMLDivElement>
 }
 
 if (__DEV__) {

packages/ui/select/src/Select.tsx

@@ -32,6 +32,7 @@ import { uniqBy } from '@hi-ui/array-utils'
 import { HiBaseAppearanceEnum, HiBaseSizeEnum, useLocaleContext } from '@hi-ui/core'
 import { callAllFuncs } from '@hi-ui/func-utils'
 import { mockDefaultHandlers } from '@hi-ui/dom-utils'
+import { mergeRefs } from '@hi-ui/react-utils'
 
 const _role = 'select'
 const _prefix = getPrefixCls(_role)
@@ -77,13 +78,14 @@ export const Select = forwardRef<HTMLDivElement | null, SelectProps>(
       onSelect: onSelectProp,
       onSearch: onSearchProp,
       onKeyDown: onKeyDownProp,
+      onClear: onClearProp,
       customRender,
       ...rest
     },
     ref
   ) => {
     const i18n = useLocaleContext()
-
+    const innerRef = useRef<HTMLDivElement>()
     const placeholder = isUndef(placeholderProp) ? i18n.get('select.placeholder') : placeholderProp
 
     const [menuVisible, menuVisibleAction] = useUncontrolledToggle({
@@ -227,7 +229,7 @@ export const Select = forwardRef<HTMLDivElement | null, SelectProps>(
     return (
       <SelectProvider value={context}>
         <Picker
-          ref={ref}
+          ref={mergeRefs(ref, innerRef)}
           className={cls}
           {...rootProps}
           visible={menuVisible}
@@ -241,6 +243,7 @@ export const Select = forwardRef<HTMLDivElement | null, SelectProps>(
           loading={rest.loading !== undefined ? rest.loading : loading}
           footer={renderExtraFooter ? renderExtraFooter() : null}
           scrollable={!inVirtual}
+          innerRef={innerRef}
           trigger={
             customRender ? (
               typeof customRender === 'function' ? (
@@ -265,6 +268,11 @@ export const Select = forwardRef<HTMLDivElement | null, SelectProps>(
                 value={value}
                 onChange={(value, item) => {
                   tryChangeValue(value, item.raw)
+                  // 非受控模式下清空下拉框
+                  if (value === '') {
+                    innerRef.current?.resetSearch()
+                    onClearProp?.()
+                  }
                 }}
                 size={size}
                 data={mergedData}
@@ -377,6 +385,10 @@ export interface SelectProps
    * 搜索时触发
    */
   onSearch?: (keyword: string) => void
+  /**
+   * 点击关闭按钮时触发
+   */
+  onClear?: () => void
   /**
    * 设置大小
    */

packages/ui/select/stories/search-controlled.stories.tsx

@@ -47,6 +47,9 @@ export const SearchControlled = () => {
             setKeyword(value)
             console.log('onSearch', value)
           }}
+          onClear={() => {
+            setKeyword('')
+          }}
           placeholder="请选择品类"
           searchPlaceholder="请输入搜索内容"
           data={data}