Importing floating UI
I have now tried multiple approaches combining custom functions and event listeners for positioning relative popovers , but I can βt create a sustainable solution . After struggling with this for a while , I 've decided to give up on creating my own Toddle solution for calculating the relative positioning and switch to using an external JS library to handle the logic . I βm wondering what the best way to implement libraries like Floating UI ( https://floating-ui.com/ ) would be . Would I need custom actions , or would I need a dedicated component with a <script > tag ? I don βt have much experience importing external libraries into Toddle , and I have a hard time wrapping my mind around it . What Lucas said π I want to add that I used Floating UI in toddle but ended up creating my own implementation in native toddle . If I remember correctly , Floating UI creates a copy of the element that you mount and you will loose the toddle 's reactivity . Could make trouble for contexts and lifecycle events . Also , I think that the element is pre mounted , so it will be in the Dom already π1Ah , I see . It doesn 't sound quite as optimal or straightforward as I might have hoped π° I 've struggled a lot with the recalculation of the placement of popovers when scrolled , and it 's become quite frustrating , haha . Because of this , I βve also considered , in addition to using external libraries , a more bold move to implement anchor ( ) in our app . Since almost all our users use Chrome or Edge , I have thought about handling anchor ( ) in a component with slots so that it can be easily updated for potential changes in the future as it becomes more widely supported . But have any of you achieved a good structure /approach for functions and event listeners to position popovers and ensure the recalculation of their positioning when the window is scrolled or resized ? My two cents on this one : One of the main benefits of Popover API is that it is a browser native way to implement modals /popovers without additional JS . Most of those benefits go out the window when strong -arming it by adding a bunch of additional code . At that point , why not just make a regular JS dropdown where you don 't have to fight the Popover API ? I am already utilizing the benefits of the popover API for simplifying the display of popovers . However , for some of my popovers , which are related to a trigger , such as a dropdown menu , I need to place the popover relatively to the trigger instead of in the middle of the viewport . And it is possible without JS The issue is the repositioning If it 's on a table or similar for example The dropdown I shared a while back in the Starter Pack uses Popover API without actions to create a dropdown
