Override Radix Sheet trapped focus?

ppaulrudy

I have a conflict between the Radix sheet component's focus and an instance of typesense docsearch I want to use. It looks like the Sheet traps browser focus while the sheet is open.

Demo (compare search button/interface focus without sheet in full-size breakpoint, vs with sheet in smaller breakpoint):

https://p-9a94b6fd-312d-46e2-aca9-8ea248c4f209.apps.webstudio.is/?authToken=2eb243a1-5272-4d8c-8771-01f74c76c21b&mode=preview

Within the nav menu, I have Typesense docsearch (based on Algolia docsearch) set up as part of the nav. The script generates a button on specified element, and when clicking the button (or using cmd-K), an absolutely positioned div with the search interface pops up as an absolutely positioned div, and sets focus in the input field.

All good in desktop view (without Radix Sheet).

The problem is that with the Radix Sheet component open, the search interface can't be focused. Radix seems to trap the focus.

Is there any way to override this (preferably that isn't super hacky)?

3 comments

JJohn Siciliano

Can you render the search inside the dialog instead of a sibling to it? I manually moved it when inspecting and i was able to use it

ppaulrudy

I've been following Typesense's docs, and they just provide a script for rendering the search, that you include with <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> and then pass a few variables to. So I'd have to fork the script and edit it, or build my own search to have it render differently

ppaulrudy

They do have a variant script for a dropdown layout which would probably work, haven't tried yet. https://typesense.org/docs/guide/docsearch.html#option-d-custom-docs-framework-with-docsearch-js-v2-dropdown-layout. But I was hoping to get this modal version working

Add a reply

Join the Webstudio community

Override Radix Sheet trapped focus?