fix(combo-box): fix clearing the state in the controlled variant (#505)

Co-authored-by: Lena Rashkovan <[email protected]>

Author: Elena Rashkovan

src/components/experimental/ComboBox/ComboBox.tsx

@@ -57,15 +57,18 @@ const ComboBoxInput = React.forwardRef<HTMLDivElement, ComboBoxFieldProps>(
             <FakeInput $isVisuallyFocused={state?.isOpen} ref={forwardedRef} onClick={() => inputRef.current?.focus()}>
                 {leadingIcon}
                 <InnerWrapper>
-                    <Label $flying={Boolean(placeholder || state?.inputValue.length > 0)}>{label}</Label>
+                    <Label $flying={Boolean(placeholder || state?.inputValue?.length > 0)}>{label}</Label>
                     <Input placeholder={placeholder} ref={inputRef} />
                 </InnerWrapper>
-                {state?.inputValue.length > 0 ? (
+                {state?.inputValue?.length > 0 ? (
                     <Button
                         // Don't inherit default Button behavior from ComboBox.
                         slot={null}
                         aria-label={ariaStrings.clearFieldButton}
-                        onPress={() => state?.setSelectedKey(null)}
+                        onPress={() => {
+                            state?.setSelectedKey(null);
+                            state?.setInputValue('');
+                        }}
                     >
                         <XCrossCircleIcon />
                     </Button>

src/components/experimental/ComboBox/docs/ComboBox.stories.tsx

@@ -104,3 +104,52 @@ export const AsyncValues: StoryObj<typeof ComboBox<Character>> = {
         );
     }
 };
+
+export const FullyControlled: Story = {
+    render: () => {
+        const [items, setItems] = React.useState<Character[]>([]);
+        const [filterText, setFilterText] = React.useState('');
+        const [key, setKey] = React.useState<string | null>(null);
+
+        React.useEffect(() => {
+            let ignore = false;
+
+            async function startFetching() {
+                const res = await fetch(`https://swapi.py4e.com/api/people/?search=${filterText}`);
+                const json = await res.json();
+
+                if (!ignore) {
+                    setItems(json.results);
+                }
+            }
+
+            // eslint-disable-next-line no-void
+            void startFetching();
+
+            return () => {
+                ignore = true;
+            };
+        }, [filterText]);
+
+        return (
+            <ComboBox
+                label="Star Wars Character"
+                items={items}
+                inputValue={filterText}
+                selectedKey={key}
+                onSelectionChange={newKey => {
+                    setFilterText(newKey as string);
+                    setKey(newKey as string);
+                }}
+                onInputChange={input => {
+                    setFilterText(input);
+                    if (input === '') {
+                        setKey(null);
+                    }
+                }}
+            >
+                {item => <ListBoxItem id={item.name}>{item.name}</ListBoxItem>}
+            </ComboBox>
+        );
+    }
+};