feat: add a clear button to FilterPicker, Select, ComboBox * 3

Author: tenphi

src/components/fields/ComboBox/ComboBox.tsx

@@ -95,6 +95,7 @@ const TriggerElement = tasty({
 
 const ClearButton = tasty(Button, {
   icon: <CloseIcon />,
+  type: 'neutral',
   styles: {
     height: '($size - 1x)',
     width: '($size - 1x)',
@@ -330,9 +331,11 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
 
   // Clear function
   let clearValue = useEvent(() => {
+    // Always clear input value in state so UI resets to placeholder
+    state.setInputValue('');
+    // Notify external input value only when custom value mode is enabled
     if (props.allowsCustomValue) {
       props.onInputChange?.('');
-      state.setInputValue('');
     }
     props.onSelectionChange?.(null);
     state.setSelectedKey(null);
@@ -497,7 +500,6 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
         {showClearButton && (
           <ClearButton
             size={size}
-            type={validationState === 'invalid' ? 'clear' : 'neutral'}
             theme={validationState === 'invalid' ? 'danger' : undefined}
             qa="ComboBoxClearButton"
             data-no-trigger={hideTrigger ? '' : undefined}

src/components/fields/FilterPicker/FilterPicker.tsx

@@ -581,25 +581,6 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
   const selectedLabels = getSelectedLabels();
   const hasSelection = selectedLabels.length > 0;
 
-  // Clear button logic
-  let showClearButton =
-    isClearable && hasSelection && !isDisabled && !props.isReadOnly;
-
-  // Clear function
-  let clearValue = useEvent(() => {
-    if (selectionMode === 'multiple') {
-      if (!isControlledMultiple) {
-        setInternalSelectedKeys([]);
-      }
-      onSelectionChange?.([]);
-    } else {
-      if (!isControlledSingle) {
-        setInternalSelectedKey(null);
-      }
-      onSelectionChange?.(null);
-    }
-  });
-
   // Always keep the latest selection in a ref (with normalized keys) so that we can read it synchronously in the popover close effect.
   const latestSelectionRef = useRef<{
     single: string | null;
@@ -976,6 +957,33 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
       setShouldUpdatePosition(!state.isOpen);
     }, [state.isOpen]);
 
+    // Clear button logic
+    let showClearButton =
+      isClearable && hasSelection && !isDisabled && !props.isReadOnly;
+
+    // Clear function
+    let clearValue = useEvent(() => {
+      if (selectionMode === 'multiple') {
+        if (!isControlledMultiple) {
+          setInternalSelectedKeys([]);
+        }
+        onSelectionChange?.([]);
+      } else {
+        if (!isControlledSingle) {
+          setInternalSelectedKey(null);
+        }
+        onSelectionChange?.(null);
+      }
+
+      if (state.isOpen) {
+        state.close();
+      }
+
+      triggerRef?.current?.focus?.();
+
+      return false;
+    });
+
     return (
       <ItemButton
         ref={triggerRef as any}

src/components/fields/Select/Select.tsx

@@ -355,6 +355,12 @@ function Select<T extends object>(
   let clearValue = useEvent(() => {
     props.onSelectionChange?.(null);
     state.setSelectedKey(null);
+    // Close the popup if it's open
+    if (state.isOpen) {
+      state.close();
+    }
+    // Return focus to the trigger for better UX
+    triggerRef.current?.focus?.();
   });
 
   let triggerWidth = triggerRef?.current?.offsetWidth;