Combination of FocusJumps and Shortcuts

[Hydhen]

Hello,

I'm developing an autocomplete system for an input, in basic shape I have something like this:

<div>
  <input type="text" />
  <i class="clear-history"></i>
  <button (click)="search()"></button>
</div>

<div popover>
  <ul role="listbox">
    <li role="option" tabindex="0"><a role="button" aria-keyshortcuts="enter">Suggestion 1</a></li>
    <li role="option" tabindex="0"><a role="button" aria-keyshortcuts="enter">Suggestion 2</a></li>
    <li role="option" tabindex="0"><a role="button" aria-keyshortcuts="enter">Suggestion 3</a></li>
  </ul>
</div>

The list part works like a charm, and I can correctly tab through input > clear > search > listbox, then navigate with arrows.

My problem is when I try to set the focus through code, my goal here is the allow the user to navigate from the input to the list of suggestion by pressing the down arrow key.

I tried getting ElementRef of the list or the first element in the list and .focus() but it doesn't work, am I missing something?

I though about a "scoped" shortcut like:

<div scope-shortcut="downarrow" scope-target="suggestions">
  <input type="text" />
  <i class="clear-history"></i>
  <button (click)="search()"></button>
</div>

<div id="suggestions" popover>
  <ul role="listbox">
    <li role="option" tabindex="0"><a role="button" aria-keyshortcuts="enter">Suggestion 1</a></li>
    ...
  </ul>
</div>

Thanks in advance!