dmikester1 – 18-25 Feb 19
Not sure if this belongs here or React. But I have a react web app with form inputs. I have an onBlur call on several of the inputs to perform a bunch of calculations and update values on the page. The thing is, when I use "tab" to blur the field, it is focusing on the next field. I don't want it to focus on anything. Simply blur/lose focus altogether.
9 Replies
My
updateValues function gets called onBlur. At the end of the updateValues function, I tried this:
That didn't do it.
Kind of wondering if I need to use onKeyDown checking for tab, and simply override the blur feature of tab using e.stopPropagation or e.preventDefault ?That would be breaking how html works.
And likely causing all sorts of issues for screen readers
All you can really do is prevent it from actually blurring
ok thanks, that makes sense. The focus was going to a couple buttons I didn't want the user to accidentally hit if they hit space or enter on their keyboard. I added tabindex of -1 to those buttons so it goes to another form field now.
Probably would have been better to just assign better tabindexes to where you want them to go
As that would make those buttons impossible to reach for a screen reader
Makes sense, I just wanted the user to be able to tab or enter to auto-calculate all the fields on the page after entering a number into an input.
Thats what it looks like.
The plus button and delete last row button I did not want to focus. And it doesn't make sense to move focus to the next row in this app.
Hrmm I’d say you need to be able to focus those with the keyboard
For those who can’t use a mouse
This thread hasn’t had any activity in 36 hours, so it’s now locked.
Threads are closed automatically after 36 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/565213527673929729/1209204149762261023