Webstudio

Log inLog into community

Join the Webstudio community

Updated 6 months ago

In an HTML Embed script, how can I access a DOM element that hasn’t yet rendered?

In an HTML Embed script, how can I access a DOM element that hasn’t yet rendered?

At a glance

The community members are trying to find a way to add a class to a child element of a Radix Sheet when the mobile navigation is active. The main challenge is that the Radix Sheet and its child elements are not in the DOM until the sheet is opened, making it difficult to target them with JavaScript. The community members explored various solutions, including using document.querySelectorAll() and calling the script twice, but these did not work. The final solution was to place the script within the Radix Sheet element itself, so that it runs when the element is rendered. This is a more elegant approach than using a MutationObserver, which was described as a more fragile technique. Additionally, the community members discussed a related issue with the Typesense Docsearch script not being able to focus on the search input when the Radix Sheet is open, but there does not appear to be a clear solution for that problem.

Useful resources

·

Edit: Leaving the question and demo below even though I've come to a clearer way to phrase my question, which is:

Is there a way for an HTML Embed script to classes on a Radix element that hasn't yet been rendered (i.e., hidden at a certain breakpoint)? I'm guessing not...

The goal of this, for me, is simply to amend the class of an element based on a breakpoint (class is needed because a script I'm loading needs to find an element by class name). If there's a way to do this in the UI, that would be great!
-------------------
Original question:
-------------------

I'm completely new to React, but I think the problem I'm running into is related to React's virtual DOM:

I have a script in an HTML Embed that attempts to use document.querySelector() to update the class of an element.

The element (a mobile nav wrapper) is set to display: none on desktop, so it's still technically "in" the DOM, but it's not accessible with querySelector() until either:

switching to mobile view (nav wrapper is rendered)
manually navigating in devtools to the element

Online, I've only been able to find suggestions to use React hooks, but that doesn't seem possible within an HTML Embed.

Is there a workaround available in Webstudio?

Here's a demo with a clear explanation of the goal and problem embedded, and console log commands to demonstrate: https://apps.webstudio.is/builder/75acd98f-1d13-400a-9106-cb2b819292b6?authToken=e051c8b6-b777-4834-9013-f8f97e32baae&mode=preview

O

p

39 comments

You want to hide elements from the dom conditionally based on a media query?

I am confused, need TLDR

you are telling so much information taht tells how you want to do it that the actual important information about what you want to achieve gets lost

Thanks, you're right. The goal kept changing as I understood more.

The goal: Add a class to a child of 'Sheet Overlay' (inside Radix Sheet Element) when mobile nav is active.

The confusion: Since I'm not familiar with React, I had assumed the sheet overlay would be in the DOM, but just "display: none". But because it's React, the sheet overlay isn't in the DOM until the Radix Sheet is clicked and React renders the overlay.

The solution I ended up using: MutationObserver observes the entire document for to detect the sheet overlay child node, and then adding/removing my class to it. (That solution isn't in my demo, fyi, but I can update it if you want to see it)

But if there's a more elegant approach, I'd love to hear it!

Add a class to a child of 'Sheet Overlay' (inside Radix Sheet Element) when mobile nav is active.

This isn't the goal.

Goal is what user experience you want to achieve

You think you neeed to add a class, but maybe you don't.

I am guessing you want to show sheet instance to mobile users

for this you just select the instance and set display: none on the right breakpoint and display: something on other breakpoints

We even made a video for this on YT https://www.youtube.com/watch?v=1xSrvEkXWws

Yes, I've watched that. Let me explain more

Ok, higher-level: I'm using Typesense Docsearch (a fork of Algolia) <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> which looks for an element with an id or class (in my case .searchbar) and renders a search button there. I'm adding that element to the nav menu items. No problem there.

The challenge arises because I have a Radix Sheet for mobile nav, and Radix Navigation Menu for desktop nav. Both of these navs need an element with .searchbar, but at the mobile breakpoint, even though Desktop nav is set to display: none, it's still in the DOM, so Docsearch attaches to the desktop one, and not the mobile one.

So I needed to insert a .searchbar-active class on the appropriate nav, and set Docsearch to find that class

Should be possible to attach search to 2 inputs, I guess you are doing js call wrong

As far as I know, not without modifying the typesense-docsearch.js, which I'd rather not do. It seems to be set up with a querySelector() and not a querySelectorAll(). At least it behaves that way—it seems to expect a unique selector

wdym? whats the js call you are doing?

oh I see what you meant. It's not the search function that's the problem, it's the part of the imported typesense-docsearch.js script that renders a button. It only seems to be capable of rendering a single button. I'm guessing it's written with querySelector() and not querySelectorAll()

where is that script

Here's the original HTML Embed script I was using that wasn't capable of finding the mobile nav element with .searchbar

Plain Text

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script type="module">
  document.addEventListener('DOMContentLoaded', (e) => {
    document.querySelector('.DocSearch-Button')?.setAttribute('tabindex', '0');
  });
</script>
<script type="module">
  docsearch({
    container: '.searchbar',
    placeholder: 'Search',
    typesenseCollectionName: 'typesense',
    typesenseServerConfig: {
      nodes: [
        {
          host: 'host.url.here',
          port: '443',
          protocol: 'https',
        },
      ],
      apiKey: '<my API key>',
    },
  });
</script>

All it does is run typesense-docsearch.js and tell it what selector to look for to render its button.

(and supply the needed API key and other info to connect to my Typesense instance)

If you want, I can share the workaround I came up with

container: '.searchbar',

replace this to

container: document.querySelectorAll('.searchbar')

actually probably won't work, just call docsearch( twice eachwith the right selector

docsearch({container: '.search1' ..
docsearch({container: '.search2' ..

ohhhh, calling it twice makes sense. I'll try your first suggestion to just in case, and report

container: document.querySelectorAll('.searchbar') didn't work, as expected.

And unfortunately, calling docsearch twice doesn't work because the mobile nav isn't rendered yet on pageload. Here's a demo for all three versions of the script: the original, calling docsearch twice, and my MutationObserver workaround:

https://apps.webstudio.is/builder/75acd98f-1d13-400a-9106-cb2b819292b6?authToken=e051c8b6-b777-4834-9013-f8f97e32baae&mode=preview

and btw thank you very much for exploring this with me!

it is loaded on page load

if it shows to you on a breakpoint, then its there

ah

yes radix will render the element when it shows thecontent

what about placing the script for init inside that content area that shows up when radix shows the searchbar?

aha! I think that would work. and since—for now—mobile and desktop navs use the same slot element, i can only have one instance of the script within that slot, then adjust the query to find > .searchbar or similar . I'll try it and let you know. thanks!

@Oleg Isonen thanks for that brilliant suggestion. It works, and since it's embedded in the element, the script is run when the element is rendered (e.g., the sheet overlay with mobile nav inside). I can reuse the same script by checking for the existence of the sheet overlay:

Plain Text

const navWrapperID = '#nav-wrapper';
const navMobileSheetOverlayID = '#nav-mobile-sheet-overlay';

const whichNav = document.querySelector(navMobileSheetOverlayID) ? navMobileSheetOverlayID : navWrapperID;

and then

Plain Text

docsearch({
  container: `${whichNav} .searchbar`,
  ... )}

Is there any downside to placing scripts within elements like this, instead of as direct children of the Body element?

Although the MutationObserver version is more complicated, it has the advantage of being visible at the top in the Webstudio UI

mutation observer is a way more fragile technique

makes sense. Thank you very much for taking the time to work through this with me. Much more elegant and straightforward this way. 🎉

@Oleg Isonen asking in this same thread because it's for the same typesense implementation you helped me with:

I have typesense docsearch script set up to generate its search button on an element within a Radix sheet. Clicking the search button opens an absolutely positioned div and attempts to move focus to the search input, but it can't. And manually clicking or tabbing to the input is also not possible. someElement.focus() doesn't work either.

The cause seems to be that Radix sheet component uses React focus trap as long as it's open. Can I override that focus trap? I'm guessing not

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

Add a reply

Sign up and join the conversation on Discord

which looks for an element with an id or class (in my case .searchbar) and renders a search button there. I'm adding that element to the nav menu items. No problem there.The challenge arises because I have a Radix Sheet for mobile nav, and Radix Navigation Menu for desktop nav. Both of these navs need an element with .searchbar, but at the mobile breakpoint, even though Desktop nav is set to display: none, it's still in the DOM, so Docsearch attaches to the desktop one, and not the mobile one.So I needed to insert a .searchbar-active class on the appropriate nav, and set Docsearch to find that class","dateCreated":"2024-07-18T18:37:41.621Z","dateModified":"2024-07-18T18:37:41.621Z","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":11,"upvoteCount":0},{"@type":"Comment","text":"Should be possible to attach search to 2 inputs, I guess you are doing js call wrong","dateCreated":"2024-07-18T18:40:43.109Z","dateModified":"2024-07-18T18:40:43.109Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":12,"upvoteCount":0},{"@type":"Comment","text":"As far as I know, not without modifying the typesense-docsearch.js, which I'd rather not do. It seems to be set up with a querySelector() and not a querySelectorAll(). At least it behaves that way—it seems to expect a unique selector","dateCreated":"2024-07-18T18:42:22.307Z","dateModified":"2024-07-18T18:42:22.307Z","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":13,"upvoteCount":0},{"@type":"Comment","text":"wdym? whats the js call you are doing?","dateCreated":"2024-07-18T18:42:55.051Z","dateModified":"2024-07-18T18:42:55.051Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":14,"upvoteCount":0},{"@type":"Comment","text":"oh I see what you meant. It's not the search function that's the problem, it's the part of the imported typesense-docsearch.js script that renders a button. It only seems to be capable of rendering a single button. I'm guessing it's written with querySelector() and not querySelectorAll()","dateCreated":"2024-07-18T18:44:17.460Z","dateModified":"2024-07-18T18:44:17.460Z","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":15,"upvoteCount":0},{"@type":"Comment","text":"where is that script","dateCreated":"2024-07-18T18:47:29.629Z","dateModified":"2024-07-18T18:47:29.629Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":16,"upvoteCount":0},{"@type":"Comment","text":"Here's the original HTML Embed script I was using that wasn't capable of finding the mobile nav element with .searchbar \n\n","dateCreated":"2024-07-18T18:47:49.965Z","dateModified":"2024-07-18T18:47:49.965Z","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":17,"upvoteCount":0},{"@type":"Comment","text":"All it does is run typesense-docsearch.js and tell it what selector to look for to render its button.","dateCreated":"2024-07-18T18:50:01.820Z","dateModified":"2024-07-18T18:50:01.820Z","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":18,"upvoteCount":0},{"@type":"Comment","text":"(and supply the needed API key and other info to connect to my Typesense instance)","dateCreated":"2024-07-18T18:50:31.147Z","dateModified":"2024-07-18T18:50:31.147Z","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":19,"upvoteCount":0},{"@type":"Comment","text":"If you want, I can share the workaround I came up with","dateCreated":"2024-07-18T18:52:12.801Z","dateModified":"2024-07-18T18:52:12.801Z","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":20,"upvoteCount":0},{"@type":"Comment","text":"container: '.searchbar',replace this tocontainer: document.querySelectorAll('.searchbar')","dateCreated":"2024-07-18T18:56:04.662Z","dateModified":"2024-07-18T18:56:04.662Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":21,"upvoteCount":0},{"@type":"Comment","text":"actually probably won't work, just call docsearch( twice eachwith the right selector","dateCreated":"2024-07-18T19:05:38.054Z","dateModified":"2024-07-18T19:05:38.054Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":22,"upvoteCount":0},{"@type":"Comment","text":"docsearch({container: '.search1' ..docsearch({container: '.search2' ..","dateCreated":"2024-07-18T19:05:54.984Z","dateModified":"2024-07-18T19:05:54.984Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":23,"upvoteCount":0},{"@type":"Comment","text":"ohhhh, calling it twice makes sense. I'll try your first suggestion to just in case, and report","dateCreated":"2024-07-18T19:06:19.205Z","dateModified":"2024-07-18T19:06:19.205Z","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":24,"upvoteCount":0},{"@type":"Comment","text":"container: document.querySelectorAll('.searchbar') didn't work, as expected.And unfortunately, calling docsearch twice doesn't work because the mobile nav isn't rendered yet on pageload. Here's a demo for all three versions of the script: the original, calling docsearch twice, and my MutationObserver workaround:https://apps.webstudio.is/builder/75acd98f-1d13-400a-9106-cb2b819292b6?authToken=e051c8b6-b777-4834-9013-f8f97e32baae&mode=preview","dateCreated":"2024-07-18T19:14:15.129Z","dateModified":"2024-07-18T19:14:15.129Z","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":25,"upvoteCount":0},{"@type":"Comment","text":"and btw thank you very much for exploring this with me!","dateCreated":"2024-07-18T19:19:00.983Z","dateModified":"2024-07-18T19:19:00.983Z","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":26,"upvoteCount":0},{"@type":"Comment","text":"it is loaded on page load","dateCreated":"2024-07-18T19:24:39.800Z","dateModified":"2024-07-18T19:24:39.800Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":27,"upvoteCount":0},{"@type":"Comment","text":"if it shows to you on a breakpoint, then its there","dateCreated":"2024-07-18T19:24:55.492Z","dateModified":"2024-07-18T19:24:55.492Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":28,"upvoteCount":0},{"@type":"Comment","text":"ah","dateCreated":"2024-07-18T19:25:03.250Z","dateModified":"2024-07-18T19:25:03.250Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":29,"upvoteCount":0},{"@type":"Comment","text":"yes radix will render the element when it shows thecontent","dateCreated":"2024-07-18T19:25:23.060Z","dateModified":"2024-07-18T19:25:23.060Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":30,"upvoteCount":0},{"@type":"Comment","text":"what about placing the script for init inside that content area that shows up when radix shows the searchbar?","dateCreated":"2024-07-18T19:25:50.790Z","dateModified":"2024-07-18T19:25:50.790Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":31,"upvoteCount":0},{"@type":"Comment","text":"aha! I think that would work. and since—for now—mobile and desktop navs use the same slot element, i can only have one instance of the script within that slot, then adjust the query to find > .searchbar or similar . I'll try it and let you know. thanks!","dateCreated":"2024-07-18T19:43:23.668Z","dateModified":"2024-07-18T19:43:23.668Z","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":32,"upvoteCount":0},{"@type":"Comment","text":"@Oleg Isonen thanks for that brilliant suggestion. It works, and since it's embedded in the element, the script is run when the element is rendered (e.g., the sheet overlay with mobile nav inside). I can reuse the same script by checking for the existence of the sheet overlay:const navWrapperID = '#nav-wrapper';\nconst navMobileSheetOverlayID = '#nav-mobile-sheet-overlay'; const whichNav = document.querySelector(navMobileSheetOverlayID) ? navMobileSheetOverlayID : navWrapperID;and thendocsearch({ container: `${whichNav} .searchbar`, ... )}","dateCreated":"2024-07-18T20:41:28.888Z","dateModified":"2024-07-18T20:41:28.888Z","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":33,"upvoteCount":0},{"@type":"Comment","text":"Is there any downside to placing scripts within elements like this, instead of as direct children of the Body element?","dateCreated":"2024-07-18T20:41:35.404Z","dateModified":"2024-07-18T20:41:35.404Z","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":34,"upvoteCount":0},{"@type":"Comment","text":"Although the MutationObserver version is more complicated, it has the advantage of being visible at the top in the Webstudio UI","dateCreated":"2024-07-18T20:41:47.942Z","dateModified":"2024-07-18T20:41:47.942Z","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":35,"upvoteCount":0},{"@type":"Comment","text":"mutation observer is a way more fragile technique","dateCreated":"2024-07-18T20:44:58.412Z","dateModified":"2024-07-18T20:44:58.412Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":36,"upvoteCount":0},{"@type":"Comment","text":"makes sense. Thank you very much for taking the time to work through this with me. Much more elegant and straightforward this way. 🎉","dateCreated":"2024-07-18T20:56:42.921Z","dateModified":"2024-07-18T20:56:42.921Z","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":37,"upvoteCount":0},{"@type":"Comment","text":"@Oleg Isonen asking in this same thread because it's for the same typesense implementation you helped me with:I have typesense docsearch script set up to generate its search button on an element within a Radix sheet. Clicking the search button opens an absolutely positioned div and attempts to move focus to the search input, but it can't. And manually clicking or tabbing to the input is also not possible. someElement.focus() doesn't work either.The cause seems to be that Radix sheet component uses React focus trap as long as it's open. Can I override that focus trap? I'm guessing not","dateCreated":"2024-07-20T00:55:09.817Z","dateModified":"2024-07-20T00:55:09.817Z","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":38,"upvoteCount":0},{"@type":"Comment","text":"Here's a demo https://apps.webstudio.is/builder/9a94b6fd-312d-46e2-aca9-8ea248c4f209?authToken=2eb243a1-5272-4d8c-8771-01f74c76c21b&mode=preview","dateCreated":"2024-07-20T01:51:45.427Z","dateModified":"2024-07-20T01:51:45.427Z","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":39,"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}}]