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.
D
dmikester1•70d ago
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 ?G
ghardin137•70d ago
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
D
dmikester1•70d ago
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.
G
ghardin137•70d ago
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
D
dmikester1•70d ago
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.
D
dmikester1•70d ago
D
dmikester1•70d ago
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.
G
ghardin137•70d ago
Hrmm I’d say you need to be able to focus those with the keyboard
For those who can’t use a mouse
UU
Unknown User•69d ago