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
dmikester159d ago
My updateValues function gets called onBlur. At the end of the updateValues function, I tried this:
if (document.activeElement instanceof HTMLElement) {
document.activeElement.blur();
}
if (document.activeElement instanceof HTMLElement) {
document.activeElement.blur();
}
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
ghardin13759d 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
dmikester159d 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
ghardin13759d 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
dmikester159d 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
dmikester159d ago
No description
D
dmikester159d 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
ghardin13759d 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 User57d ago