Programmatically setting focus to `webaudio-keyboard`

[abulka]

Is it possible to programmatically set focus to the webaudio-keyboard?

Being able to play the piano keyboard with the computer QWERTY keyboard when the webaudio-keyboard has the focus is a great hidden feature. However when I click on another part of my GUI, the focus changes and I can no longer play the webaudio-keyboard piano with my QWERTY keys and have to explicitly mouse over the piano and click on it to refocus onto it - which then allows me to continue playing with my QWERTY keys again. It would be nice if I could programmatically set focus back to the webaudio-keyboard with some code e.g. when a UI button has done its job, it would programmatically set focus back to the webaudio-keyboard?

Given

    <div>
      <webaudio-keyboard keys="61" id="interactive-keyboard" width="800"></webaudio-keyboard>
    </div>

   <button @mousedown="chordPlay()" class="ui button">Play Chord</button>

I've tried adding this code to the button click handler

  document.getElementById("interactive-keyboard").focus();
  console.log('active element is', document.activeElement)

however this does not change the focus - the document.activeElement is still the button.