react-spectrum icon indicating copy to clipboard operation
react-spectrum copied to clipboard

Fix GridList disallowTypeAhead

Open rilescode opened this issue 1 month ago • 2 comments

Closes #9120

disallowTypeAhead was not correctly being passed through into useGridListProps.

✅ Pull Request Checklist:

  • [x] Included link to corresponding React Spectrum GitHub Issue.
  • [ ] Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • [x] Filled out test instructions.
  • [ ] Updated documentation (if it already exists for this component).
  • [ ] Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Run Storybook and navigate to the GridList stories.

Replace the existing GridListExample in GridList.stories.tsx with this code snippet. This setup just sets textValue on GridListItems and the disallowTypeAhead prop on the GridList.

export const GridListExample: GridListStory = (args) => (
  <GridList
    {...args}
    className={styles.menu}
    aria-label="test gridlist"
    disallowTypeAhead
    style={{
      width: 300,
      height: 300,
      display: 'grid',
      gridTemplate: args.layout === 'grid' ? 'repeat(3, 1fr) / repeat(3, 1fr)' : 'auto / 1fr',
      gridAutoFlow: 'row'
    }}>
    <MyGridListItem textValue="Apple">Apple <Button>Actions</Button></MyGridListItem>
    <MyGridListItem textValue="Banana">Banana <Button>Actions</Button></MyGridListItem>
    <MyGridListItem textValue="Cherry">Cherry <Button>Actions</Button></MyGridListItem>
    <MyGridListItem textValue="Dragon Fruit">Dragon Fruit <Button>Actions</Button></MyGridListItem>
    <MyGridListItem textValue="Elderberry">Elderberry <Button>Actions</Button></MyGridListItem>
    <MyGridListItem textValue="Fig">Fig <Button>Actions</Button></MyGridListItem>
    <MyGridListItem textValue="Grape">Grape <Button>Actions</Button></MyGridListItem>
    <MyGridListItem textValue="Honeydew">Honeydew <Button>Actions</Button></MyGridListItem>
    <MyGridListItem textValue="Kiwi">Kiwi <Button>Actions</Button></MyGridListItem>
  </GridList>
);

Before the fix: Interact with the GridList and type a letter that exists as an item. Observe that type-ahead is still active and selects the matching item, despite disallowTypeAhead being set.

After the fix: No item should be selected or focused when typing.

🧢 Your Project:

rilescode avatar Oct 31 '25 22:10 rilescode