Handsontable: input in custom header looses focus

Created on 29 Jan 2018  路  3Comments  路  Source: handsontable/handsontable

Description

We've added column filtering by means of custom header renderer. Since upgrade from 0.31.2 to 0.35.0 (reproduced on 0.35.1 as well) the input inside the header looses focus right after it's selected.

Steps to reproduce

  1. go to http://jsfiddle.net/zoladkow/8n91mwzd/
  2. click on an input in the header
  3. try to type something
  4. the focus is now on first cell in the same column

Demo

http://jsfiddle.net/zoladkow/8n91mwzd/

Your environment

  • Handsontable version: 0.35.0
  • Browser Name and version: Chrome 63.0.3239.132 (Official Build) (64-bit)
  • Operating System: Win 10
Documentation needed

Most helpful comment

I found a workaround for this issue -
You can use the beforeOnCellMouseDown hook.
Add following method:

this.handleHotBeforeOnCellMouseDown =  (event, coords) ->
    if (coords.row < 0)
        event.stopImmediatePropagation()

Which basically means that if you select the header (so coordinates are negative), the first row won't be selected, so it won't steal focus from input in your header

I hope it will help!``

All 3 comments

I have replicated the issue. We are able to select text from the input but the selection does not remain after releasing the mouse button.

I found a workaround for this issue -
You can use the beforeOnCellMouseDown hook.
Add following method:

this.handleHotBeforeOnCellMouseDown =  (event, coords) ->
    if (coords.row < 0)
        event.stopImmediatePropagation()

Which basically means that if you select the header (so coordinates are negative), the first row won't be selected, so it won't steal focus from input in your header

I hope it will help!``

We have added an example with inputs in headers https://docs.handsontable.com/pro/1.18.1/demo-filtering.html

Was this page helpful?
0 / 5 - 0 ratings