remove selection from useSearchAutocomplete

Author: reidbarber

packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts

@@ -93,7 +93,8 @@ export function useSearchAutocomplete<T>(props: AriaSearchAutocompleteOptions<T>
       listBoxRef,
       inputRef,
       onFocus: undefined,
-      onBlur: undefined
+      onBlur: undefined,
+      selectedKey: null
     },
     state
   );

packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx

@@ -89,9 +89,8 @@ function _SearchAutocompleteBase<T extends object>(props: SpectrumSearchAutocomp
       defaultFilter: contains,
       allowsEmptyCollection: isAsync,
       allowsCustomValue: true,
-      onSelectionChange: (key) => key !== null && onSubmit(null, key),
-      selectedKey: undefined,
-      defaultSelectedKey: undefined
+      selectedKey: null,
+      defaultSelectedKey: null
     }
   );
   let layout = useListBoxLayout(state);

packages/@react-stately/combobox/src/useComboBoxState.ts

@@ -60,6 +60,7 @@ export function useComboBoxState<T extends object>(props: ComboBoxStateOptions<T
   } = props;
 
   let [showAllItems, setShowAllItems] = useState(false);
+  let [showNoItems, setShowNoItems] = useState(false);
   let [isFocused, setFocusedState] = useState(false);
   let [inputValue, setInputValue] = useControlledState(
     props.inputValue,
@@ -72,6 +73,15 @@ export function useComboBoxState<T extends object>(props: ComboBoxStateOptions<T
       props.onSelectionChange(key);
     }
 
+    // If key is controlled to be null, unset the selectedKey, set the inputValue, and show no items
+    if (props.selectedKey === null) {
+      setSelectedKey(null);
+      setShowNoItems(true);
+      if (key) {
+        setInputValue(collection.getItem(key)?.textValue ?? '');
+      }
+    }
+
     // If key is the same, reset the inputValue and close the menu
     // (scenario: user clicks on already selected option)
     if (key === selectedKey) {
@@ -92,8 +102,8 @@ export function useComboBoxState<T extends object>(props: ComboBoxStateOptions<T
     // No default filter if items are controlled.
     props.items != null || !defaultFilter
       ? collection
-      : filterCollection(collection, inputValue, defaultFilter)
-  ), [collection, inputValue, defaultFilter, props.items]);
+      : filterCollection(collection, inputValue, showNoItems ? () => false : defaultFilter)
+  ), [props.items, defaultFilter, collection, inputValue, showNoItems]);
   let [lastCollection, setLastCollection] = useState(filteredCollection);
 
   // Track what action is attempting to open the menu
@@ -253,6 +263,13 @@ export function useComboBoxState<T extends object>(props: ComboBoxStateOptions<T
     lastSelectedKeyText.current = selectedItemText;
   });
 
+  useEffect(() => {
+    if (showNoItems) {
+      setShowNoItems(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [inputValue]);
+
   // Revert input value and close menu
   let revert = () => {
     if (allowsCustomValue && selectedKey == null) {