Why map is focused on keydown.enter in input field?

430
2
03-25-2021 01:37 AM
martinparanor
New Contributor

A form outside of map view loses focus on the enter key and the map is focused instead. I believe this behavior is not expected, and I am not sure if it is a bug or there is any way to avoid it.

Repro steps:

  1. Open https://stackblitz.com/edit/js-pusl6y?file=index.html

  2. Enter value in form input above map

  3. Hit enter

  4. Map search input field is focused

Tested in Google Chrome 89.0.4389.82 with versions 4.16 and 4.18

Any ideas? Thank you.

Tags (2)
2 Replies
JeffreyWilkerson
Occasional Contributor II

I think the form element is setup to go when the enter key is identified.  You could possibly set up a routine to identify any key down/press event and determine if it's an enter key, such as:

function onKeyDown(event) {
    // Shift key
    if (event.which === 16) { console.log('shift key pressed'); }
    else if (event.which === 27) { console.log('escape key pressed');}
    else if (event.which === 39 || event.which === 37) { 
        console.log('arrow keys pressed');
    }
    else if (event.which === 13) { 
        // Peform the function that you need, or disregard it.
        console.log('Enter key!');
    }
}

but this can get ugly, fast.  

I would recommend that you don't setup, whatever it is that you are setting up, in a form.  Just have the input elements and set up an onclick event for the button to do something at that point.  Such as:

btnSubmit = document.getElementById("btnSubmit");
btnSubmit.onclick = function () {
    let val1 = document.getElementById("textbox1").value;
    let val2 = document.getElementById("textbox2").value;
    // Do something with these values...
}

You'll need 'id' values in your elements but this should work.  Also, 'document.getElementById' is old school, but you could also import the Dojo 'dom' and use 'byId' that way. 

 

martinparanor
New Contributor

Thank you, in the end I set up an override on document events and simply skipped events that took the focus.

0 Kudos