S
SolidJS

support

Container onFocus to observe to subelement focus?

Mmooff7/27/2023
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? onFocusIn={() => setSidebarVisible(true)} seems to work :-)

Looking for more? Join the community!