Skip to content
Flint
Blog

autoFocusProps

Reports autoFocus props that are not set to false.

✅ This rule is included in the jsx logical and logicalStrict presets.

Auto-focusing elements automatically grab the user’s focus, which is generally disruptive behavior. It can be particularly disruptive to users who rely on screen readers and/or keyboard navigation.

Consider letting users focus elements manually instead.

Examples

Section titled “Examples”
CE6buttCB0autoFocAE d ivclassNa="meco">d>d>d>CE6buttCB0autoFocA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dtr1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE6inpCB0autoFocA3<4{sp ansty="le--0:#FF6A83;--1:#A248">48tr3<4}sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>
<44AE spans="tyle--0:#7F">DECE6buDBC<>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6buD61B0autoF4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4Df1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" />di><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6buD61B0autoF4<4AE= spans="tyle--0:#E2817F;--1:#B2">3<834{ spans="tyle--0:#FF6A83;--1:#A2">4848f3<834} spans="tyle--0:#7FDBCA;--1:#88">44A<} />di>

When Not To Use It

Section titled “When Not To Use It”

If you have specific use cases where auto-focus is necessary for user experience (such as modal dialogs), you may want to disable this rule for those specific cases. Auto-focusing elements should only sparingly be used when explicitly triggered by users.

Further Reading

Section titled “Further Reading”

Equivalents in Other Linters

Section titled “Equivalents in Other Linters”