Join the Webstudio community

Updated 2 months ago

Override Radix Sheet trapped focus?

At a glance

The community member has a conflict between the Radix sheet component's focus and an instance of Typesense docsearch they want to use. The Sheet component seems to trap the browser focus while it is open, preventing the Typesense docsearch interface from being focused. The community member has provided a demo link to illustrate the issue.

In the comments, a community member suggests rendering the search inside the dialog instead of as a sibling. However, the community member notes that the Typesense docsearch script just provides a script to include and some variables to pass, so they would have to fork the script or build their own search to render it differently.

Another community member mentions that Typesense has a variant script for a dropdown layout, which they haven't tried yet, but the community member was hoping to get the modal version working.

There is no explicitly marked answer in the comments.

Useful resources
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)?
J
p
3 comments
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
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
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
Sign up and join the conversation on Discord
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","dateCreated":"2024-09-06T22:58:53.890Z","dateModified":"2024-09-06T22:58:53.890Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/17ed9850-2d85-4351-8dca-fdbb5bdcfb01","name":"paulrudy","identifier":"17ed9850-2d85-4351-8dca-fdbb5bdcfb01","image":"https://cdn.discordapp.com/avatars/641766378294214659/d1631a94d61720ca5987174377ae1b58.webp?size=256"},"commentCount":0,"comment":[],"position":2,"upvoteCount":0},{"@type":"Comment","text":"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","dateCreated":"2024-09-06T23:20:45.702Z","dateModified":"2024-09-06T23:20:45.702Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/17ed9850-2d85-4351-8dca-fdbb5bdcfb01","name":"paulrudy","identifier":"17ed9850-2d85-4351-8dca-fdbb5bdcfb01","image":"https://cdn.discordapp.com/avatars/641766378294214659/d1631a94d61720ca5987174377ae1b58.webp?size=256"},"commentCount":0,"comment":[],"position":3,"upvoteCount":0}],"author":{"@type":"Person","url":"https://help.webstudio.is/members/17ed9850-2d85-4351-8dca-fdbb5bdcfb01","name":"paulrudy","identifier":"17ed9850-2d85-4351-8dca-fdbb5bdcfb01","image":"https://cdn.discordapp.com/avatars/641766378294214659/d1631a94d61720ca5987174377ae1b58.webp?size=256"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0}}]