IGX Grid – Controls in Column Header Template (input, select, etc) don't get focus when click on it, because of the header gets the focus inmediately

I need a input text on the header of certain columns, i found some examples of that, using headerTemplate, but only works on Ignite version 8 and 9, but in v10 it doesn’t work because the header gets the focus automatically.

The column is in a Collapsible Column Group

Exists some property or function that i need to add or remove to get the desired functionality.

Let me to know if need more information.

Thanks in advance.

Hello,

I have been looking into your question and prepared a small sample using igniteui-angular version 10.1 with collapsible column groups and input in the header of one of the columns in the groups.

In the igxHeader template, I added a div container with an input-group. In order to prevent further propagation of the click and keydown events in the capturing and bubbling phases, my suggestion is to call the events stopPropagation method on div container click and on keydown on the input.

Additionally, since the stopPropagation would not prevent any default behaviors from occurring,  on pointerdown event on the input, my suggestion is to call the preventDefault method too and set the focus to the input:

  pDown(args, input) {
    args.stopPropagation();
    args.preventDefault();
    input.focus();
  }

Here could be found my sample for your reference. Please test it on your side and let me know if I may be of any further assistance.

Sincerely,
Teodosia Hristodorova
Associate Software Developer