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}
@@ -222,6 +228,10 @@ export const Picker = forwardRef<HTMLDivElement | null, PickerProps>(
   }
 )
 
+export interface PickerHelper {
+  resetSearch: () => void
+}
+
 export interface PickerProps extends HiBaseHTMLFieldProps<'div'> {
   /**
    * 是否禁用
@@ -304,6 +314,10 @@ export interface PickerProps extends HiBaseHTMLFieldProps<'div'> {
    * 开启内容区域可滚动
    */
   scrollable?: boolean
+  /**
+   * 提供辅助方法的内部引用
+   */
+  innerRef?: React.Ref<PickerHelper>
 }
 
 if (__DEV__) {

packages/ui/select/src/Select.tsx

@@ -16,7 +16,7 @@ import { useLatestCallback } from '@hi-ui/use-latest'
 import VirtualList, { useCheckInVirtual } from '@hi-ui/virtual-list'
 import type { ListRef } from 'rc-virtual-list'
 import { isArrayNonEmpty, isUndef } from '@hi-ui/type-assertion'
-import { Picker, PickerProps } from '@hi-ui/picker'
+import { Picker, PickerProps, PickerHelper } from '@hi-ui/picker'
 import { Highlighter } from '@hi-ui/highlighter'
 import { UseDataSource } from '@hi-ui/use-data-source'
 import {
@@ -77,13 +77,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<PickerHelper>()
     const placeholder = isUndef(placeholderProp) ? i18n.get('select.placeholder') : placeholderProp
 
     const [menuVisible, menuVisibleAction] = useUncontrolledToggle({
@@ -228,6 +229,7 @@ export const Select = forwardRef<HTMLDivElement | null, SelectProps>(
       <SelectProvider value={context}>
         <Picker
           ref={ref}
+          innerRef={innerRef}
           className={cls}
           {...rootProps}
           visible={menuVisible}
@@ -265,6 +267,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 +384,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}