Skip to main content

a11y/noOnChange

MISSING DOCUMENTATION

Examples

Invalid

<select onChange={() => {}} />;

 file.tsx:1:8 lint/a11y/noOnChange ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide an onBlur event instead of an onChange event unless
    absolutely necessary.

    <select onChange={() => {}} />;
            ^^^^^^^^^^^^^^^^^^^

  The onBlur event is more declarative and reliable for indicating
    input changes when using keyboard navigation.


<select onChange={handleOnChange} />;

 file.tsx:1:8 lint/a11y/noOnChange ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide an onBlur event instead of an onChange event unless
    absolutely necessary.

    <select onChange={handleOnChange} />;
            ^^^^^^^^^^^^^^^^^^^^^^^^^

  The onBlur event is more declarative and reliable for indicating
    input changes when using keyboard navigation.


<option onChange={() => {}} />

 file.tsx:1:8 lint/a11y/noOnChange ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide an onBlur event instead of an onChange event unless
    absolutely necessary.

    <option onChange={() => {}} />
            ^^^^^^^^^^^^^^^^^^^

  The onBlur event is more declarative and reliable for indicating
    input changes when using keyboard navigation.


<option onChange={() => {}} {...props} />

 file.tsx:1:8 lint/a11y/noOnChange ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide an onBlur event instead of an onChange event unless
    absolutely necessary.

    <option onChange={() => {}} {...props} />
            ^^^^^^^^^^^^^^^^^^^

  The onBlur event is more declarative and reliable for indicating
    input changes when using keyboard navigation.

<select onchange="() => void 0" ></select>

 file.html:1:8 lint/a11y/noOnChange ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide an onblur event instead of an onchange event unless
    absolutely necessary.

    <select onchange="() => void 0" ></select>
            ^^^^^^^^^^^^^^^^^^^^^^^

  The onblur event is more declarative and reliable for indicating
    input changes when using keyboard navigation.


<option onchange="() => void 0" ></option>

 file.html:1:8 lint/a11y/noOnChange ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide an onblur event instead of an onchange event unless
    absolutely necessary.

    <option onchange="() => void 0" ></option>
            ^^^^^^^^^^^^^^^^^^^^^^^

  The onblur event is more declarative and reliable for indicating
    input changes when using keyboard navigation.

Valid

<select onBlur={() => {}} />;
<select onBlur={handleOnBlur} />;
<option />;
<option onBlur={() => {}} onChange={() => {}} />;
<option {...props} />
<input onChange={() => {}} />;
<input onChange={handleOnChange} />;
<input />;
<input onChange={() => {}} onChange={() => {}} />;
<input {...props} />
<select onblur="() => void 0"></select>
<option ></option>
<option onblur="() => void 0" onchange="() => void 0" ></option>
<input onchange="() => void 0" />
<input />