Fix rendering TagGroup inside GridList (adobe#6758)

* fix rendering TagGroup inside GridList * clear in GridListItem instead
alecmev · Jul 23, 2024 · 291033b · 291033b
1 parent 3013156
commit 291033b
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 2 deletions.
diff --git a/packages/react-aria-components/src/GridList.tsx b/packages/react-aria-components/src/GridList.tsx
@@ -394,7 +394,8 @@ export const GridListItem = /*#__PURE__*/ createLeafComponent('item', function G
                   description: descriptionProps
                 }
               }],
-              [CollectionRendererContext, DefaultCollectionRenderer]
+              [CollectionRendererContext, DefaultCollectionRenderer],
+              [ListStateContext, null]
             ]}>
             {renderProps.children}
           </Provider>

diff --git a/packages/react-aria-components/stories/GridList.stories.tsx b/packages/react-aria-components/stories/GridList.stories.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, Checkbox, CheckboxProps, DropIndicator, UNSTABLE_GridLayout as GridLayout, GridList, GridListItem, GridListItemProps, UNSTABLE_ListLayout as ListLayout, useDragAndDrop, UNSTABLE_Virtualizer as Virtualizer} from 'react-aria-components';
+import {Button, Checkbox, CheckboxProps, DropIndicator, UNSTABLE_GridLayout as GridLayout, GridList, GridListItem, GridListItemProps, UNSTABLE_ListLayout as ListLayout, Tag, TagGroup, TagList, useDragAndDrop, UNSTABLE_Virtualizer as Virtualizer} from 'react-aria-components';
 import {classNames} from '@react-spectrum/utils';
 import React, {useMemo} from 'react';
 import {Size} from '@react-stately/virtualizer';
@@ -174,3 +174,28 @@ export function VirtualizedGridListGrid() {
     </Virtualizer>
   );
 }
+
+export function TagGroupInsideGridList() {
+  return (
+    <GridList
+      className={styles.menu} 
+      aria-label="Grid list with tag group"
+      style={{
+        width: 300,
+        height: 300
+      }}>
+      <MyGridListItem textValue="Tags">
+        1,1
+        <TagGroup aria-label="Tag group">
+          <TagList style={{display: 'flex', gap: 10}}>
+            <Tag key="1">Tag 1</Tag>
+            <Tag key="2">Tag 2</Tag>
+            <Tag key="3">Tag 3</Tag>
+          </TagList>
+        </TagGroup>
+      </MyGridListItem>
+      <MyGridListItem>1,2 <Button>Actions</Button></MyGridListItem>
+      <MyGridListItem>1,3 <Button>Actions</Button></MyGridListItem>
+    </GridList>
+  );
+}
diff --git a/packages/react-aria-components/test/GridList.test.js b/packages/react-aria-components/test/GridList.test.js
@@ -20,6 +20,9 @@ import {
   GridListItem,
   UNSTABLE_ListLayout as ListLayout,
   RouterProvider,
+  Tag,
+  TagGroup,
+  TagList,
   useDragAndDrop,
   UNSTABLE_Virtualizer as Virtualizer
 } from '../';
@@ -415,6 +418,46 @@ describe('GridList', () => {
     expect(rows.map(r => r.textContent)).toEqual(['Item 7', 'Item 8', 'Item 9', 'Item 10', 'Item 11', 'Item 12', 'Item 13', 'Item 14', 'Item 49']);
   });
 
+  it('should support rendering a TagGroup inside a GridListItem', async () => {
+    let buttonRef = React.createRef();
+    let {getAllByRole} = render(
+      <GridList aria-label="Test">
+        <GridListItem data-test-id="grid-list" id="tags" textValue="tags">
+          <TagGroup aria-label="Tag group">
+            <TagList>
+              <Tag key="1">Tag 1</Tag>
+              <Tag key="2">Tag 2</Tag>
+              <Tag key="3">Tag 3</Tag>
+            </TagList>
+          </TagGroup>
+        </GridListItem>
+        <GridListItem id="dog" textValue="Dog">Dog <Button aria-label="Info" ref={buttonRef}>ⓘ</Button></GridListItem>
+        <GridListItem id="kangaroo">Kangaroo</GridListItem>
+      </GridList>
+    );
+
+    let items = getAllByRole('grid')[0].children;
+    let tags = within(items[0]).getAllByRole('row');
+
+    await user.tab();
+    expect(document.activeElement).toBe(items[0]);
+
+    await user.keyboard('{ArrowRight}');
+    expect(document.activeElement).toBe(tags[0]);
+
+    await user.keyboard('{ArrowRight}');
+    expect(document.activeElement).toBe(tags[1]);
+
+    await user.keyboard('{ArrowDown}');
+    expect(document.activeElement).toBe(items[1]);
+
+    await user.tab();
+    expect(document.activeElement).toBe(buttonRef.current);
+
+    await user.tab();
+    expect(document.activeElement).toBe(document.body);
+  });
+
   describe('drag and drop', () => {
     it('should support drag button slot', () => {
       let {getAllByRole} = render(<DraggableGridList />);