2

I have multiple dropdowns in a row and I want to allow the user to move from one field to the other with the tabulator key.

The dropdowns match the text, allow full text search and are clearable.

The tabbing does work but, unfortunately, when tabbing through the dropdowns, the first value gets automatically selected:

enter image description here

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Semantic UI: tabbing through select boxes</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
  </head>
  <body>
    <form>
      <select class="ui search dropdown">
        <option value="">choose one</option>
        <option value="1">abc</option>
        <option value="2">bcd</option>
        <option value="3">cde</option>
      </select>
      <select class="ui search dropdown">
        <option value="">choose one</option>
        <option value="1">ababa</option>
        <option value="2">cdcdcd</option>
        <option value="3">efefef</option>
      </select>
      <select class="ui search dropdown">
        <option value="">choose one</option>
        <option value="1">ababa</option>
        <option value="2">cdcdcd</option>
        <option value="3">efefef</option>
      </select>
    </form>
    <script>
      window.onload = () => {
        $('form .ui.dropdown').dropdown({
          match: 'text',
          clearable: true
        });
      }
    </script>
  </body>
</html>

I've tried multiple combinations of settings with both Semantic UI and Fomantic UI, but I could not find any that would allow searchable dropdowns.

By looking at the different options for action I could get one that was very promising but, then, it was impossible to make a selection when there was only one option (left).

Does anybody know of a configuration that allows the user to tab through the dropdowns without having the first option selected? With Semantic-UI or Fomantic-UI?

a.l.e
  • 792
  • 8
  • 16

1 Answers1

0

This Fomantic-UI issue has brought me to the right path:

[Dropdown] Search selection selects first item on close

The solution is to set forceSelection to false:

        $('form .ui.dropdown').dropdown({
          match: 'text',
          clearable: true,
          forceSelection: false
        });
a.l.e
  • 792
  • 8
  • 16