Escape key issue - want only popup to close and not browser window to minimise

Phoenix Forum Questions / Help
1

I am working on a custom autocomplete component. It is working fine - it shows a popup with search results and user can select the result with either mouse or keyboard. I am using phx-window-keydown binding to let user scroll up and down the results using arrow keys and select one result when enter key is pressed. Now i want the popup to close when i press the Escape key.

I added another handle_event to handle the escape key and it closes the popup but also it minimises the browser window. How i can stop it from doing so?

2

I don’t think this is even possible from javascript, so I would investigate something about how your OS is configured with its key bindings.

3

hmm, I am trying to mimic a datalist (but not using datalist attr in my custom autocomplete component) based dropdown which closes itself when escape key is pressed without browser window getting minimised. I checked on all OS and it (datalist based dropdown) has the same consistent behaviour.

What if i use a custom hook and that hook will stop default behaviour (esp for Escape key) & dispatch an event back to LV. Not sure if that will work but will give it a try.

4

created this hook and it worked fine so far; need more testing to make sure it is not breaking other functionality:

KeyPressEvent: {
    mounted(){
      document.addEventListener("keydown", event => {
        console.log(event)
        if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown' && event.key !== 'Escape' && event.key !== 'Enter') {
          return
        }
        event.preventDefault()
      })
    },
  }

using the same hook on input field. Is it the right way? i am very new to LV’s way of doing things.

5

realised it broke Enter (on key Enter it no longer selects the option) functionality; modified & simplified it:

KeyPressEvent: {
    mounted(){
      document.addEventListener("keydown", event => {
        if(event.key === 'Escape') {
          event.preventDefault()
        }
      })
    },
  }