Skip to content

Conversation

@rilescode
Copy link

@rilescode rilescode commented Oct 31, 2025

Closes #9120

disallowTypeAhead was not correctly being passed through into useGridListProps.

✅ Pull Request Checklist:

  • 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).
  • 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:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

disallowTypeAhead does not work with Autocomplete and GridList

1 participant