no-onchange.md

[Deprecated] no-onchange

⚠️ Deprecated: This rule is based on reports of behavior of old browsers (eg. IE 10 and below). In the meantime, this behavior has been corrected, both in newer versions of browsers as well as in the DOM spec.

Enforce usage of onBlur over/in parallel with onChange on select menu elements for accessibility. onBlur should be used instead of onChange, unless absolutely necessary and it causes no negative consequences for keyboard only or screen reader users. onBlur is a more declarative action by the user: for instance in a dropdown, using the arrow keys to toggle between options will trigger the onChange event in some browsers. Regardless, when a change of context results from an onBlur event or an onChange event, the user should be notified of the change unless it occurs below the currently focused element.

Rule details

This rule takes no arguments.

Succeed

<select onBlur={updateModel}>
  <option/>
</select>

<select>
  <option onBlur={handleOnBlur} onChange={handleOnChange} />
</select>

Fail

<select onChange={updateModel} />

Accessibility guidelines

• WCAG 3.2.2

Resources

• onChange Event Accessibility Issues
• onChange Select Menu