hx-trigger="mousedown[button===0]" does not work while "mousebutton[button===1]" does #3409
Description
Context
I am working with a password field which also has a button to display the password in cleartext. When I press the button the blur event of the input fires and replaces the entire inputfield including the button, so that the click event is never fired. It works with a mousedown event, however it fires on all mousebuttons not only the primary button.
Problem
I wanted to use event filters to check if the primary button had been pressed (hx-trigger="mousedown[button===0]"). While it works for secondary (button===2) and middle (button===1) mouse buttons, it does not seem to work for the primary mouse button. I tested on OSX with Chrome, Firefox, and Safari.
Is 0 handled differently in the event filter mechanism? Do I have to apply the expression differently?
Here is an HTMX v2.0.6 example to demonstrate:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<script src="https://unpkg.com/[email protected]"></script>
<script>
document.addEventListener('mousedown', (e) => {
console.log('Button: ' + e.button + ' is zero ' + (e.button === 0));
console.log('Button: ' + e.button + ' is one ' + (e.button === 1));
console.log('Button: ' + e.button + ' is two ' + (e.button === 2));
console.log('----------');
});
</script>
<button hx-trigger="mousedown[button===0]" hx-get="content.html" hx-target="#my-target" hx-swap="innerHTML">
Primary Button
</button>
<button hx-trigger="mousedown[button===2]" hx-get="content.html" hx-target="#my-target" hx-swap="innerHTML">
Secondary Button
</button>
<button hx-trigger="mousedown[button===1]" hx-get="content.html" hx-target="#my-target" hx-swap="innerHTML">
Middle Button
</button>
<div id="my-target">
<!-- content area -->
</div>
</body>
</html>
content.html
<p>content</p>