Best way to maintain selected cell focus when the table is blurred?

Tags: #<Tag:0x00007f8b23da31e8>
#1

When the table is “blurred” by clicking on other elements on the screen (outside of the table area), what is the best way to keep the selected cell focused so that the blue borders around the selected cell remain visible? The default behaviour is for the divs comprising the borders of the selected cell to disappear by having their style attribute “display” property set to “none”.

My use case is that when a cell is selected, other UI components outside of the table are updated (and data relating to the selected cell is displayed and can be edited), so it would be helpful if the currently selected cell in the table could remain visibly focused.

It would be great if there was an “onTableBlur” hook that lets you customize behaviour, or a property on the handsontable, something like a boolean “keepSelectionOnBlur"

#2

Hi @james11

Thank you for contacting us. Actually, we have a configuration option that let you do this - outsideClickDeselcts. Here’s an example:

https://jsfiddle.net/aszymanski/cehg1stv/

Is that what you needed?

1 Like
#3

Thank you! I thought I had thoroughly gone through the documentation and searched the forum before posting (for info relating to “blur” and “focus”), but somehow I missed that config option that was right in front of me. :crazy_face:

Renaming that to “keepSelectionOnBlur” and having a “onTableBlur” hook (or just “tableBlur” to keep things consistent with your naming convention) would be more intuitive for people familiar with JavaScript but new to Handsontable, IMO. https://www.w3schools.com/jsref/event_onblur.asp

#4

Just wanted to add, Handsontable is awesome. Very feature-rich and configurable, with great documentation. I’ve used jspreadsheet in other projects and have just been evaluating switching to Handsontable going forward. Your quick and helpful response helped us decide to make the switch :+1:

2 Likes
#5

Hi @james11

Thank you for your opinion and suggestion! I’m glad that this solution worked for you :slight_smile:

1 Like
#6