Fix combobox section filtering and Firefox gap issue (#4326)

Author: devongovett

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

@@ -364,10 +364,12 @@ function filterNodes<T>(collection: Collection<Node<T>>, nodes: Iterable<Node<T>
   for (let node of nodes) {
     if (node.type === 'section' && node.hasChildNodes) {
       let filtered = filterNodes(collection, getChildNodes(node, collection), inputValue, filter);
-      if ([...filtered].length > 0) {
+      if ([...filtered].some(node => node.type === 'item')) {
         filteredNode.push({...node, childNodes: filtered});
       }
-    } else if (node.type !== 'section' && filter(node.textValue, inputValue)) {
+    } else if (node.type === 'item' && filter(node.textValue, inputValue)) {
+      filteredNode.push({...node});
+    } else if (node.type !== 'item') {
       filteredNode.push({...node});
     }
   }

packages/react-aria-components/docs/GridList.mdx

@@ -735,8 +735,10 @@ function Example() {
   }
 }
 
-.react-aria-DropIndicator[data-drop-target] {
-  outline: 1px solid var(--highlight-background);
+.react-aria-DropIndicator {
+  &[data-drop-target] {
+    outline: 1px solid var(--highlight-background);
+  }
 
   @supports not selector(:has(.foo)) {
     /* Undo gap in browsers that don't support :has */
@@ -1022,8 +1024,10 @@ function Example() {
   <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
 
 ```css
-.react-aria-DropIndicator[data-drop-target] {
-  outline: 1px solid var(--highlight-background);
+.react-aria-DropIndicator {
+  &[data-drop-target] {
+    outline: 1px solid var(--highlight-background);
+  }
 
   @supports not selector(:has(.foo)) {
     /* Undo gap in browsers that don't support :has */
@@ -1095,8 +1099,10 @@ function Example() {
   <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
 
 ```css
-.my-drop-indicator.active {
-  outline: 1px solid #e70073;
+.my-drop-indicator {
+  &.active {
+    outline: 1px solid #e70073;
+  }
 
   @supports not selector(:has(.foo)) {
     /* Undo gap in browsers that don't support :has */

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

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, ComboBox, ComboBoxContext, Input, Item, Label, ListBox, Popover, Text} from '../';
+import {Button, ComboBox, ComboBoxContext, Header, Input, Item, Label, ListBox, Popover, Section, Text} from '../';
 import React from 'react';
 import {render, within} from '@react-spectrum/test-utils';
 import userEvent from '@testing-library/user-event';
@@ -84,4 +84,40 @@ describe('ComboBox', () => {
     userEvent.click(button);
     expect(button).toHaveAttribute('data-pressed');
   });
+
+  it('should support filtering sections', () => {
+    let {getByRole} = render(
+      <ComboBox>
+        <Label>Preferred fruit or vegetable</Label>
+        <Input />
+        <Button />
+        <Popover>
+          <ListBox>
+            <Section>
+              <Header>Fruit</Header>
+              <Item id="Apple">Apple</Item>
+              <Item id="Banana">Banana</Item>
+            </Section>
+            <Section>
+              <Header>Vegetable</Header>
+              <Item id="Cabbage">Cabbage</Item>
+              <Item id="Broccoli">Broccoli</Item>
+            </Section>
+          </ListBox>
+        </Popover>
+      </ComboBox>
+    );
+
+    let input = getByRole('combobox');
+    userEvent.type(input, 'p');
+
+    let listbox = getByRole('listbox');
+    let groups = within(listbox).getAllByRole('group');
+    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);
+  });
 });