Make a Callback for After a Dropdown Menu Has Opened

Open
#5,153 2 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
45/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
react, typescript
Domain
accessibility, frontend

Research direction

Start with the Dropdown behavior described in the issue and the linked custom dropdown components example, then trace how onToggle and focusFirstItemOnShow handle opening and focus. Done means providing a post-open callback or equivalent behavior so inputs inside the menu can receive focus and be reached by keyboard after opening.

Written by the indexing model from the issue text.

Description

accessibility

Is your feature request related to a problem? Please describe

Yes, I have implemented custom dropdowns that contain various inputs, like selects, text inputs, checkboxes and radio buttons. I used the example outlined here that includes a text input: https://react-bootstrap.github.io/components/dropdowns/#custom-dropdown-components

However, as you can see even in the example linked above, after the first open of the dropdown users cannot tab into the input. This is a huge issue for accessibility. I was trying to use the onToggle callback for the Dropdown to put focus on the first input however this callback triggers just before the menu opens in the UI.

Describe the solution you'd like

A method that triggers after the UI has updated, or possibly for the Dropdown to put focus automatically on the first input element when opened

Describe alternatives you've considered

I ended up creating a Custom.Item anchor tag that is empty and has 'tabindex=-1'. then, when that element gains focus due to the dropdown having 'focusFirstItemOnShow={true}' i can manually put focus into the first input. However, it seems like there should be a better way.

Additional context

n/a

Dominant language
TypeScript
Stars
22.6k
Forks
3.6k
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from react-bootstrap/react-bootstrap

All issues in react-bootstrap/react-bootstrap

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.