Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Daniel Komrakov
45
igx-select in igx-grid pops up on a second 'enter' just to be closed automatically due to leaving of an edit mode
posted

Hi

I have igx-select in an edit template of a column in an igx-grid.

To activate it on switching to the edit mode I've decorated it with igxFocus='true'.

The problem is that on next 'enter' the select pops up but then gets closed automatically by the grid due to leaving of the edit mode 

https://stackblitz.com/edit/github-srbuis-dpvliy

The question is how to open the popup on the fist 'enter' stroke or at least prevent closing on the second.

Thank you!

Parents
No Data
Reply
  • 2700
    Verified Answer
    Offline posted
    Hello Daniel,

     

    Thank you for the provided sample!

     

    I have been looking into it and slightly modified it in order to prevent the IgxSelectComponent from immediately closing, because of the grid’s cell edit mode default behavior.

    To achieve this, my suggestion is handling the keydown event on the IgxSelect and in case the event’s key is “Enter” execute the event’s stopPropagation method to prevent it from bubbling up to the parent elements, the grid’s cell in this case.

     

    public handleSelectKeyDown(event) {
    if (event.key === "Enter") {
      event.stopPropagation();
    }
  }

     

    With this approach, the IgxSelect can be opened or closed by pressing “Enter” (as well as “Space”, or ALT + Up/Down Arrow keys for that matter). On pressing “Tab” when in edit mode, the next cell will be navigated to, as usual.

     

    Please, test the forked sample, which you can find here and if you require any further assistance on the matter, please let me know.

     

    Sincerely,
    Bozhidara Pachilova
    Associate Software Developer
Children