Carden Kent
Sep 4, 2018 · 1 min read

Also, If you like to have focus on keyboard-tab, but not onClick you can wrap the inner contents of your element as below:

<button onClick={() => foo()}>
<span
style={{
outline: 'none',
width: '100%',
height: '100%',
}}
tabIndex='-1' // makes span element un-tabbable
>
Submit
</span>
</button>

So when you tab, you will tab to the <button/>, but when you click you will be clicking on the <span />.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade