Skip to content

fix(radio): dispatch input event on keyboard navigation#5949

Open
akinshaywai wants to merge 1 commit intomaterial-components:mainfrom
akinshaywai:fix/radio-keyboard-input-event
Open

fix(radio): dispatch input event on keyboard navigation#5949
akinshaywai wants to merge 1 commit intomaterial-components:mainfrom
akinshaywai:fix/radio-keyboard-input-event

Conversation

@akinshaywai
Copy link
Copy Markdown

Problem

Fixes #5447

Native <input type="radio"> fires both input and change events when a radio button is selected via arrow key navigation. <md-radio> only dispatches change, which means:

  • React users miss keyboard selections because React's onChange maps to the DOM input event, not change
  • Any listener specifically watching for input events is silently skipped on keyboard navigation

Fix

In SingleSelectionController.handleKeyDown, fire an InputEvent('input', { bubbles: true, composed: true }) before the existing change event, matching native <input type="radio"> order and behavior:

  • composed: true so the event crosses shadow DOM boundaries (same as native)
  • input fires before change (same order as native)

A new test dispatches an input event on user navigation is added alongside the existing dispatched a change event on user navigation test.

Testing

// Before fix – input handler never called on ArrowRight
radio.addEventListener('input', () => console.log('input fired'));

// After fix – fires on both click and arrow key navigation

Native <input type="radio"> fires both 'input' and 'change' events
when a radio is selected via arrow key navigation. md-radio was only
dispatching 'change', causing frameworks and listeners that rely on
the 'input' event (e.g. React's onChange which maps to the DOM input
event) to miss keyboard-driven selections.

Fire an InputEvent('input', {bubbles: true, composed: true}) before
the existing 'change' dispatch in SingleSelectionController to match
native behavior. Also adds a test asserting the input event fires on
arrow key navigation.

Fixes material-components#5447
@google-cla
Copy link
Copy Markdown

google-cla Bot commented Apr 17, 2026

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

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.

md-radio: check by keyboard doesn't trigger 'input' event

1 participant