[GH #1922] Table "steals" focus from input

Tags: #<Tag:0x00007efc64e30f00> #<Tag:0x00007efc64e30dc0>
#1

Description

I have a React application using a Mantine modal that has an input with autofocus. The table will steal the keyboard events if it was active when clicking to open the modal:

HoT-focus-issue
HoT-focus-issue.gif812×454 550 KB

I have had this issue before and then I could check if the active element class name was handsontableInput

if (document.activeElement.className !== "handsontableInput" &&
  document.activeElement.className !== "HandsontableCopyPaste") {
  event.stopImmediatePropagation();
}

But this technique doesn’t work for me anymore…

If I manually click the input this issue doesn’t manifest.

Any suggestions?

#2

Hi @mottosson

We are aware of some issues regarding focus with Handsontable. The good news is that we will work on that soon.

I think that in your case using outsideClickDeselects option and setting it to true should be sufficient.

https://jsfiddle.net/aszymanski/rx7a1q0d/

#3

That’s not going to work for me to loose the selected ranges since the reason for moving away from the table is to do a find and replace on selected cells in this example.

I hope you start to work on this as soon as possible. It’s a small detail maybe, but it make things really difficult for me when it really shouldn’t have to be.

#4

Hi @mottosson

I understand. I’ll let you know when we will have some progress and be able to test the improved focus management.

#5

Anything new on this, since your work with accessibility in v14 possibly touches upon this topic?

What exactly is keeping track of the selected state of the table and keeps stealing focus if necessary? And is it possible to unset this manually somehow?

#6

Hi @mottosson

We released v14 at the end of the last week, and yes, we actually fixed many problems regarding focus management. You can check new version and let me know if the problem is solved. Here you can see the whole changelog for the new version: https://handsontable.com/docs/javascript-data-grid/release-notes/

#7

I did try it out and didn’t notice any differences when it comes to the table stealing focus from other elements. The problem remains that if another input gets focus when opening a modal (in my case) it will steal the focus when I start to type and the input will be typed into a cell and not the form I intended.

I don’t know what internal mechanisms in Handsontable controls this behavior, but it would be nice if I could set it to not listen to input manually. Like a setFocus property with true/false.

#8

I’m sorry to hear that. I hoped that our rebuilt focus management system would fix this kind of issues. Would it be possible for you to create an example showing the issue? I will then try to debug it this way to see if maybe there are some methods that would help with this.

#9
#10

Hi @mottosson

I have good news. We’ve found a source of this issue and were able to find a new way of managing this, as in previous workaround there wasn’t any method that detached the focus from Handsontable. Here you can see how to manage it now: https://jsfiddle.net/handsoncode/eq4dnhyr/

1 Like