Skip to content

Combobox: fire native input and change events from the hidden input - #43261

Closed
samyferhat wants to merge 2 commits into
twbs:mainfrom
samyferhat:combobox-change-event
Closed

samyferhat wants to merge 2 commits into
twbs:mainfrom
samyferhat:combobox-change-event

Conversation

@samyferhat

@samyferhat samyferhat commented Nov 1, 2026 •

Copy link
Copy Markdown

Description

  • When the selection changes, the hidden input fires native input then change events. Both bubble, like on a <select>.
  • Without name, the toggle fires the same events. This matches Unify chip input and editable Combobox #43300.
  • No event fires when the value stays the same, or for the selection synced on init.
  • Docs: the "Form submission" and "Events" sections describe the new events.
  • Tests cover single and multiple selection, keyboard selection, no name, an unchanged value, and the init sync.

Motivation & Context

  • The combobox only fired change.bs.combobox on the toggle. A form listener never saw the new value.
  • The hidden input holds the form value, so event.target.name and event.target.value work as with a native field.
  • I researched the solution and ran the tests. Claude helped me with the implementation.

Type of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Refactoring (non-breaking change)
  • Breaking change (fix or feature that would change existing functionality)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • I have added tests to cover my changes
  • All new and existing tests passed

Live previews

Related issues

Fixes #43001

🤖 Generated with Claude Code

A native select fires input and change when its value changes. The
combobox only fired change.bs.combobox on the toggle, so form listeners
never saw the new value. The hidden input now fires both events when
its value changes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@samyferhat samyferhat mentioned this pull request Nov 1, 2026
2 tasks done
@samyferhat
samyferhat marked this pull request as ready for review November 1, 2026 18:32
@samyferhat
samyferhat requested a review from a team as a code owner November 1, 2026 18:32
@julien-deramond julien-deramond added v6 v6, the main branch docs Documentation site and its content feature New feature, or a change to how an existing one works js JavaScript or TypeScript sources and plugins needs-decision A maintainer decides first: scope, design or breaking change labels Nov 1, 2026
@zegganewalid

Copy link
Copy Markdown

Looks good to me. Two things:

  1. Heads-up: Unify chip input and editable Combobox #43300 (Unify chip input and editable Combobox, by mdo) rewrites combobox.ts and already fires native input then change in _selectionChanged(). One difference: there the target is this._hiddenInput ?? this._element, so the events also fire when no name is set, while here they only fire when the hidden input exists. Both PRs touch _selectItem(), so it may be worth aligning the behaviour with that PR, or checking which one should land first.

  2. The tests only select with a click. _handleToggleKeydown() also calls _selectItem() on Enter/Space, so a test that selects an item with the keyboard and checks the native change would cover the other entry point.

@julien-deramond julien-deramond removed the needs-decision A maintainer decides first: scope, design or breaking change label Nov 6, 2026
Without a hidden input, the combobox fired no native event, so a form
listener never saw the change. The toggle now fires input and change in
that case, like twbs#43300 does. Add a test for a selection made with Enter.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@netlify

netlify Bot commented Nov 7, 2026

Copy link
Copy Markdown

✅ Deploy Preview for twbs-bootstrap ready!

Name Link
🔨 Latest commit 42087a5
🔍 Latest deploy log https://app.netlify.com/projects/twbs-bootstrap/deploys/6aef5bf8911e2113f8adb8a2
😎 Deploy Preview https://deploy-preview-43261--twbs-bootstrap.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@samyferhat

Copy link
Copy Markdown
Author

Thanks for the heads-up on #43300!

  1. I aligned the behaviour: without name, the toggle now fires input and change, like this._hiddenInput ?? this._element there. Docs and the PR description are updated (42087a5). Unify chip input and editable Combobox #43300 rewrites combobox.ts and already covers this, so I'm fine with whatever order the maintainers prefer. If it lands first, I'm happy to close this one.
  2. Added a test that selects an item with Enter and checks the native change. Small note: Enter/Space selection goes through _handleMenuKeydown(). _handleToggleKeydown() only opens the menu.

@mdo mdo closed this in #43300 Nov 12, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs Documentation site and its content feature New feature, or a change to how an existing one works js JavaScript or TypeScript sources and plugins v6 v6, the main branch

Projects

None yet

Development

Successfully merging this pull request may close these issues.

v6: Combobox should trigger change event

3 participants