* picker: support for clearing searchbox on select value from multi …

…box.
easysoft · Jan 16, 2025 · 11d27af · 11d27af
1 parent 98150fd
commit 11d27af
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 6 deletions.
diff --git a/lib/picker/src/component/picker-menu.tsx b/lib/picker/src/component/picker-menu.tsx
@@ -149,22 +149,21 @@ export class PickerMenu extends PickPop<PickerState, PickerMenuProps> {
         if (Array.isArray(item.items) && item.items.every(x => this._disabledSet.has(x.value as string))) {
             return;
         }
-        const {multiple, onToggleValue, onSelect, togglePop, onDeselect} = this.props;
+        const {multiple, onPick} = this.props;
         if (multiple) {
             if (item.items) {
                 const map = getValueMap(item.items as NestedItem[]);
                 const values = [...map.values()].filter(x => !x.items && !this._disabledSet.has(x.value as string)).map(x => x.value as string);
                 if ($(target).closest('.item').children('.item-inner.selected').length) {
-                    onDeselect(values);
+                    onPick({diselect: values});
                 } else {
-                    onSelect(values);
+                    onPick({select: values});
                 }
             } else {
-                onToggleValue(value);
+                onPick({toggle: value});
             }
         } else {
-            onSelect(value);
-            togglePop(false, {search: ''});
+            onPick({select: value});
         }
     };
 

diff --git a/lib/picker/src/component/picker.tsx b/lib/picker/src/component/picker.tsx
@@ -31,6 +31,7 @@ export class Picker<S extends PickerState = PickerState, O extends PickerOptions
         emptyValue: '',
         cache: true,
         hotkeys: true,
+        clearSearchOnSelect: true,
     };
 
     static Pop = PickerMenu as typeof Pick.Pop;
@@ -350,6 +351,24 @@ export class Picker<S extends PickerState = PickerState, O extends PickerOptions
         };
     }
 
+    protected _handlePickValue = (options: {toggle?: string, select?: string | string[], diselect?: string | string[]}) => {
+        const {toggle, select, diselect} = options;
+        if (toggle !== undefined) {
+            this.toggleValue(toggle);
+        } else if (select !== undefined) {
+            this.select(select);
+        } else if (diselect !== undefined) {
+            this.deselect(diselect);
+        }
+        if (this.props.multiple) {
+            if (this.props.clearSearchOnSelect && this.state.search?.length) {
+                this.focusSearch('');
+            }
+        } else {
+            this.toggle(false, {search: ''} as S);
+        }
+    };
+
     protected _getPopProps(props: RenderableProps<O>, state: Readonly<S>): PickerMenuProps<S> {
         return {
             ...super._getPopProps(props, state),
@@ -370,6 +389,7 @@ export class Picker<S extends PickerState = PickerState, O extends PickerOptions
             onClear: this.clear,
             onToggleValue: this.toggleValue,
             onSetValue: this.setValue,
+            onPick: this._handlePickValue,
         };
     }
 

diff --git a/lib/picker/src/types/picker-menu-props.ts b/lib/picker/src/types/picker-menu-props.ts
@@ -19,6 +19,7 @@ export interface PickerMenuProps<S extends PickerState = PickerState> extends Pi
     exceedLimitHint?: string;
     picker?: Picker;
 
+    onPick: (options: {toggle?: string, select?: string | string[], diselect?: string | string[]}) => void;
     onSelect: (values: string | string[]) => void;
     onDeselect: (values: string | string[]) => void;
     onClear: () => void;

diff --git a/lib/picker/src/types/picker-options.ts b/lib/picker/src/types/picker-options.ts
@@ -29,6 +29,7 @@ export interface PickerOptions<S extends PickerState = PickerState> extends Pick
     searchHint?: string;
     hotkeys?: HotkeysSettings;
     caretClass?: ClassNameLike;
+    clearSearchOnSelect?: boolean;
 
     onDeselect?: (values: string | string[]) => false | void;
     onSelect?: (values: string | string[]) => false | void;