How to implement better tabbing behavior? [SOLVED]

Tags: #<Tag:0x00007efc65094418> #<Tag:0x00007efc650942b0>
#1

I’m trying to use HoT for data entry. There were be certain cells that are enabled for data entry but most cells will be read-only and unfocusable. When the user presses TAB or SHIFT+TAB the focus should be moved to the next or prior editable cell.

I’ve had to implement this capability manually via the beforeKeyDown event since HoT can’t do this. I’ve got it mostly working except now I have an issue with returning false from the hook.

If I don’t return false then HoT sees the tab and advances to the next cell which is incorrect since I’ve now handled it myself. However if I don’t return false HoT seems to hand off processing of the TAB key to the browser or something and the Handsontable grid LOOSES FOCUS! Its like the user tabs away from the HoT control itself which is obviously not what I want. When I do this in development focus actually moves to the tabs in the inspection part of the browser in Chrome (Elements, Console, Sources, etc).

I need a way to override the tab behavior of HoT still let HoT believe it has handled the event and not pass it on for further processing.

#2

Never mind, I figured it out. I ended up slapping all of this at the end if I handle it:

                    event.stopPropagation();
                    event.stopImmediatePropagation();
                    event.cancelBubble = true;
                    event.preventDefault();

Though I think its the preventDefault that does the trick. But with 4 different ways of cancelling further behavior and no mention of what these do (that I could find) in the documentation its really hard to say.

#3

@dan.rhodes

I’m glad that you were able to find a solution for this problem. I will close this topic now. Feel free to open a new one if you would need help with anything else.

#4