Fix dropdown form child clicks#42527
Conversation
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 364de7b95f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| const isFormChild = event.target && typeof event.target.closest === 'function' && | ||
| event.target.closest('form') |
There was a problem hiding this comment.
When the entire dropdown is rendered inside an outer <form>, event.target.closest('form') walks past the dropdown menu and marks every menu item as a form child. Because the next condition only checks context._menu.contains(event.target), normal clicks on links/buttons in that dropdown menu now skip _completeHide, so default autoClose: true no longer closes menus in forms; constrain this check to a form that is itself contained by the menu.
Useful? React with 👍 / 👎.
2 participants
Description
Keeps dropdowns open when clicking elements inside a form within a dropdown menu, such as a label associated with an input.
Motivation & Context
Fixes #41803. Bootstrap already keeps dropdowns open for direct input, select, option, textarea, and form clicks inside the menu. This extends that behavior to descendants of forms, matching the expected behavior for form controls and labels embedded in dropdown menus.
Type of changes
Checklist
npm run lint)Live previews
N/A
Related issues
Fixes #41803
Testing
npm run js-lint -- --quietnpm run js-test-karma -- --browsers ChromeHeadless(811 specs passing)