CODEWITHSUNDEEP
htmlpolymer
TobiasB
TobiasB

Reputation: 25

Select Item in Polymer 2 paper-dropdown-menu with TAB

I have a paper-dropdown-menu in Polymer 2, similar to this one: 

<paper-dropdown-menu label="Dinosaurs">
  <paper-listbox class="dropdown-content" selected="1">
    <paper-item>allosaurus</paper-item>
    <paper-item>brontosaurus</paper-item>
    <paper-item>carcharodontosaurus</paper-item>
    <paper-item>diplodocus</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

I can select an item of the paper-listbox by pressing the ENTER- Key on my Keyboard. Is there a way to select a paper-item by pressing the Tab key

Upvotes: 1

Views: 534

Answers (1)

tony19
tony19

Reputation: 138696

You could add a key binding to <paper-listbox> via addOwnKeyBinding(). The specified handler must be a method of <paper-listbox>, so you'd have to attach your own method.

<paper-listbox id="listbox></paper-listbox>

// script
connectedCallback() {
  super.connectedCallback();

  // Attach our own handler for TAB-key
  this.$.listbox._onListTabKey = e => {

    // Cancel TAB key event
    e.preventDefault();
    e.stopPropagation();
    e.detail.keyboardEvent.preventDefault();

    // Select currently focused item
    const focusedIndex = this.$.listbox.indexOf(this.$.listbox.focusedItem);
    this.$.listbox.select(focusedIndex);
  };

  this.$.listbox.addOwnKeyBinding('tab', '_onListTabKey');
}

Polymer 1 demo

Polymer 2 demo

Note overriding TAB may be an accessibility issue.

Upvotes: 0

Related Questions