Container onFocus to observe to subelement focus?

Trying the following, but the handler doesn't seem to be fired when a sidebar item is tab focused using the keyboard:

return <>
  <app-sidebar onFocus={() => setSidebarVisible(true)} hidden={!sidebarVisible()}>
    <ul>
      <li tabIndex={0}>Foo</li>
      <li tabIndex={0}>Foo</li>
    </ul>
  </app-sidebar>

  <app-main></app-main>
</>

return <>
  <app-sidebar onFocus={() => setSidebarVisible(true)} hidden={!sidebarVisible()}>
    <ul>
      <li tabIndex={0}>Foo</li>
      <li tabIndex={0}>Foo</li>
    </ul>
  </app-sidebar>

  <app-main></app-main>
</>

The idea is that the sidebar will become visible when shift-tabbing into it. But - onFocus doesn't seem to handle focus events from child elements. - on:focus seems to be disallowed by TypeScript - oncapture:focus might be what I want, but it's also disallowed by TypeScript What can I do?

1 Reply

mooffOP•2y ago

onFocusIn={() => setSidebarVisible(true)} seems to work :-)

Gaming

Programming

Container onFocus to observe to subelement focus?