Tab and shift-tab keeps dropdown open while other inputs selected

Thanks for your work on this library.

Demo here (click on the first input and tab through the elements): https://codesandbox.io/s/stoic-tdd-mkm61?file=/App.svelte

It seems the functionality is meant to use tab/shift+tab to move between dropdown items. However, the page selection is still allowed to move to other surrounding inputs. Unfortunately, this has the side effect of leaving the dropdown menu open as you navigate. When you have multiple , this can cover up a lot of the page.

I think an option to turn off the current tab behaviour would be useful.

I have a crude workaround in the example for anyone who runs into this issue. A mousedown check is required because hiding the dropdown in the onBlur handler will prevent you from clicking options:

<script>
  import Autocomplete from "simple-svelte-autocomplete";

  let colors = ["red", "green", "blue"];
  let color;

  let mousedown = false;
  document.addEventListener("mousedown", () => (mousedown = true));
  document.addEventListener("mouseup", () => (mousedown = false));
</script>

<style>
  .hide-dropdown :global(.autocomplete-list) {
    display: none;
  }
</style>

<div id="content">
  <div class={colors._hideDropdown ? 'hide-dropdown' : ''}>
    <label>Color:</label>
    <Autocomplete
      items={colors}
      bind:selectedItem={color}
      let:item
      onFocus={() => colors._hideDropdown = false}
      onBlur={() => {
        if (!mousedown) colors._hideDropdown = true
      }}
    >
      {item}
    </Autocomplete>
  </div>
</div>

pstanoev / simple-svelte-autocomplete

Tab and shift-tab keeps dropdown open while other inputs selected #126