Comment by gsanderson
3 days ago
Looks great!
One suggestion would be adding a focus trap, such as when a Dialog opens. It's nice to use the tab key to move around the Dialog (inputs and buttons). Currently focus leaves to the page behind. It might be as simple as adding https://alpinejs.dev/plugins/focus#x-trap
Yeah, I looked into it but wanted to avoid adding plugins.
I already do a bit of (simple) focusing here and there, so it shouldn't leave the focus on the background:
https://github.com/hunvreus/basecoat/blob/main/src/js/dialog...
But more complex scenario require you to be specific about the field you want to see focused. I was thinking about allowing you designate the field to focus on.
What would you suggest?
Why aren't you just using the built-in dialog element that already handles this?
<dialog> is kind of a PITA to style (backdrop, transitions, etc), and doesn't really solve any of the tough problems with dialogs (e.g. locking scrolling).
I tried really hard to use <dialog> and popover but didn't succeed. Maybe somebody more skilled can make it happen.