Custom Element with focus and tab stop?

Help Requests
1

I’ve built a custom element that is supposed to work as a <select> of addresses where each item displayed is a multi-line address. However, because the element does not actually include an html <select> or <input> element, it doesn’t show up as a tab stop and has not focus event.

Is there any way to build a custom element that will act as an input element and have a focus and blur events as well as the ability to be registered as a tab stop?

My code if it helps at all:

<template>
  <require from="components/ssi-address.html"></require>
  <require from="components/address-dropdown.scss"></require>
  <div style="position:relative;margin-bottom:.4rem" click.delegate="showDrop = !showDrop" >
    <div style="display:flex;align-items:center;padding:10px;justify-content:space-between">
      <ssi-address address.bind="selectedAddress"></ssi-address>
      <i class="fas fa-chevron-down color-p" style="cursor:pointer"></i>
    </div>

    <div if.bind="showDrop && addressList.length" class="drop-list" mouseleave.trigger="showDrop = false">
        <ssi-address class="drop-list-item" repeat.for="a of addressList" click.trigger="dropChoose(a)" address.bind="a" ></ssi-address>
    </div>
  </div>
</template>
2

this should help you. in short, make use of the tabindex attribute Focusing: focus/blur

2 Likes
3

Thanks! tabIndex did the trick!