Tabindex in phoenix forms

Greetings! I am making a simple modal on my page and having trouble with users interacting with the page by tabbing over phoenix inputs when the modal is open. How can I set tabindex="-1" in phoenix forms? Or is there any easier way to do it on the whole page when the modal is loaded? Thank you in advance!

1 Like

If you’re referring to users tabbing through elements that are behind the modal, then you might be looking for a “focus trap”. This is commonly handled in JavaScript. Here’s an example of what that looks like.

AlpineJS has a pretty simple implementation to handle this with the trap plugin. It uses focus-trap behind the scenes, so you could probably set up a hook with it if you didn’t want to use AlpineJS.

1 Like