search

alpinejs / alpine

A rugged, minimal framework for composing JavaScript behavior in your markup.
https://alpinejs.dev
MIT License
27.92k stars 1.22k forks source link

[UI][Tabs] Prevent tab focus on mousedown #4239

Closed SimoTod closed 3 months ago

SimoTod commented 3 months ago

Currently a tab gets the focus when you receive the mousedown event instead of the full click. This is different from how tabs usually work everywhere else (including Tailwind Headless UI that fixed it with this PR: https://github.com/tailwindlabs/headlessui/pull/1192).

Unfortunately, it's not easily testable because cypress doesn't behave that way but chrome and firefox do.

This seem to cause some interoperability issues with x-dialog too: https://github.com/alpinejs/alpine/discussions/4230#discussioncomment-9532452 (The OP didn't provide an example though).

calebporzio commented 3 months ago

Ah this makes total sense and the mousedown prevention listener is a nice solution - I didn't know that would prevent focus but it makes sense.

I'm gonna use that in other situations too.

Thanks simone!