lekoala / bootstrap5-autocomplete

Autocomplete for Bootstrap 5 (and 4!)
MIT License
87 stars 16 forks source link

on Enter keydown #4

Closed tonytomov closed 1 year ago

tonytomov commented 1 year ago

I have situation in inline form where the user can select a value from autocomplete. It is working ok, but the problem is when the user select a value from autocomplete and pres enter, the value is selected, but pressing again Enter to search on this value nothing happen.

Maybe the reason for this is the onkeydown(e) function

  onkeydown(e) {
    const key = e.keyCode || e.key;
    switch (key) {
      case 13:
      case "Enter":
        e.preventDefault();
        const selection = this.getSelection();
        if (selection) {
          selection.click();
        }
        break;

As can be seen first preventDefault is run and then selection is done, which of course mean that every time a enter is pressed a preventDefault is run.

My suggestion is to move the preventDefault right after the if

  onkeydown(e) {
    const key = e.keyCode || e.key;
    switch (key) {
      case 13:
      case "Enter":
        const selection = this.getSelection();
        if (selection) {
          e.preventDefault();
          selection.click();
        }
        break;

This way when press first time enter, the value is selected, and press second time enter will invoke the other function related to the input.

lekoala commented 1 year ago

@tonytomov yep, actually, handling any keyboard event related to the dropdown when the dropdown is not visible does not make a lot of sense. i disabled all of them when the dropdown is not visible. it's on master

tonytomov commented 1 year ago

It is working as expected. Thanks.