fix: ensure contains is used as default filter in ComboBox (#9234)

* fix: ensure contains is used as default filter in ComboBox

* add test

---------

Co-authored-by: Robert Snow <[email protected]>
Co-authored-by: Robert Snow <[email protected]>

Author: alexdametto

packages/react-aria-components/src/ComboBox.tsx

@@ -133,8 +133,8 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
   let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
   let {contains} = useFilter({sensitivity: 'base'});
   let state = useComboBoxState({
-    defaultFilter: props.defaultFilter || contains,
     ...props,
+    defaultFilter: props.defaultFilter || contains,
     // If props.items isn't provided, rely on collection filtering (aka listbox.items is provided or defaultItems provided to Combobox)
     items: props.items,
     children: undefined,

packages/react-aria-components/test/ComboBox.test.js

@@ -147,6 +147,44 @@ describe('ComboBox', () => {
     expect(options).toHaveLength(1);
   });
 
+  it('should support undefined defaultFilter', async () => {
+    let tree = render(
+      <ComboBox defaultFilter={undefined}>
+        <Label>Preferred fruit or vegetable</Label>
+        <Input />
+        <Button />
+        <Popover>
+          <ListBox>
+            <ListBoxSection>
+              <Header>Fruit</Header>
+              <ListBoxItem id="Apple">Apple</ListBoxItem>
+              <ListBoxItem id="Banana">Banana</ListBoxItem>
+            </ListBoxSection>
+            <ListBoxSection>
+              <Header>Vegetable</Header>
+              <ListBoxItem id="Cabbage">Cabbage</ListBoxItem>
+              <ListBoxItem id="Broccoli">Broccoli</ListBoxItem>
+            </ListBoxSection>
+          </ListBox>
+        </Popover>
+      </ComboBox>
+    );
+
+    let comboboxTester = testUtilUser.createTester('ComboBox', {root: tree.container});
+    act(() => {
+      comboboxTester.combobox.focus();
+    });
+    await user.keyboard('p');
+
+    let groups = comboboxTester.sections;
+    expect(groups).toHaveLength(1);
+    expect(groups[0]).toHaveAttribute('aria-labelledby');
+    expect(document.getElementById(groups[0].getAttribute('aria-labelledby'))).toHaveTextContent('Fruit');
+
+    let options = within(groups[0]).getAllByRole('option');
+    expect(options).toHaveLength(1);
+  });
+
   it('should support dynamic collections', async () => {
     let defaultItems = [
       {id: 1, name: 'Cat'},
@@ -413,7 +451,7 @@ describe('ComboBox', () => {
     let onAction = jest.fn();
     function WithCreateOption() {
       let [inputValue, setInputValue] = useState('');
-    
+
       return (
         <ComboBox
           allowsEmptyCollection
@@ -464,7 +502,7 @@ describe('ComboBox', () => {
     }
     expect(onAction).toHaveBeenCalledTimes(1);
     expect(comboboxTester.combobox).toHaveValue('');
-    
+
     // Repeat with an option selected.
     await comboboxTester.selectOption({option: 'Cat'});