Popover API: Input fields on mobile/ touch
I have a popover in my app using the popover api . This popover has an input field where users can enter links . It works fine on desktop , but it doesnt work on mobile . I believe it has to do with the focus state but i cant figure out how to do it on mobile / touch . Does anyone have an idea how to solve it ? Popover API : Input fields on mobile / touch I had the same issue and I believe when you focus on mobile the browser does that scroll /zoom into view and that 's what 's causing it . I stopped using the popover API for now and just using css to display the dialog . But I have tested an input in the Spark dialog and that worked as expected π1*Mobile browsers sometimes fail to update the inert state when showing the popover again . The best way to fix this is to manually remove inert and , if needed , force focus on an input field . Try Solution 1 first , and if the issue persists , use Solution 2 (manual popover handling ) . * I now created a custom action to open the popover manually and it works fine π / * * * @param {Args } args * @param {Ctx } ctx * / function popoverOpenAction ( ) { const popover = ctx .root .getElementById (args .id ) ; if ( !popover ) { console .error ( "Popover element not found . " ) ; return ; } popover .showPopover ( ) ; popover .removeAttribute ( "inert " ) ; / / Ensure mobile interaction works / / Delay focus slightly to fix mobile issues setTimeout ( ( ) = > { const input = popover .querySelector ( "input " ) ; if (input ) { input .focus ( ) ; input .scrollIntoView ( { behavior : "smooth " , block : "center " } ) ; } } , 100 ) ; / / Adjusted delay for better mobile behavior } π1
