htmx icon indicating copy to clipboard operation
htmx copied to clipboard

`hx-disabled-elt` does not work with multiple parameterized selectors

Open mtlynch opened this issue 1 year ago • 3 comments

Sidenote: Thanks for this library and for Hypermedia Systems! I'm reading the book and experimenting with a port of one of my apps to htmx.

From my experimentation with htmx 2.0.0, it seems like the hx-disabled-elt attribute works fine with multiple selectors when they're simple CSS selectors like hx-disabled-elt="#b1, #b2", but when I specify multiple selectors using next or find, then only the first element in the list is processed.

Here's an example using next, but I've also seen this with find:

  it('multiple elts can be disabled with next', function() {
    this.server.respondWith('GET', '/test', 'Clicked!')
    var b1 = make('<button hx-get="/test" hx-disabled-elt="next #b2, next #b3">Click Me!</button>')
    var b2 = make('<button id="b2">Click Me!</button>')
    var b3 = make('<button id="b3">Demo</button>')

    b2.hasAttribute('disabled').should.equal(false)
    b3.hasAttribute('disabled').should.equal(false)

    b1.click()
    b2.hasAttribute('disabled').should.equal(true)
    b3.hasAttribute('disabled').should.equal(true)

    this.server.respond()

    b2.hasAttribute('disabled').should.equal(false)
    b3.hasAttribute('disabled').should.equal(false)
  })
$ npm run test
...
  643 passing (5s)
  3 pending
  1 failing

  1) hx-disabled-elt attribute
       multiple elts can be disabled with next:

      AssertionError: expected false to equal true
      + expected - actual

      -false
      +true
      
      at Context.<anonymous> (attributes/hx-disabled-elt.js:94:40)

mtlynch avatar Jun 22 '24 02:06 mtlynch

Hey, you're totally right, multiple extended selectors aren't supported yet. See #2645 and #2610 for similar issues & discussions.

A current workaround for this is to rely on multiple standard CSS selectors, using for example a parent ID and a child selector, or a sibling selector

Telroshan avatar Jun 22 '24 07:06 Telroshan

I can use multiple standard CSS selectors in my use case, but just wanted to note the docs show multiple extended selectors being supported:

<form hx-post="/example" hx-disabled-elt="find input[type='text'], find button">

https://htmx.org/attributes/hx-disabled-elt/

tbuckley avatar Nov 26 '24 02:11 tbuckley

Oops, good catch @tbuckley , likely a mistake when it was written, as multiple extended selectors were never supported. Hopefully #2902 makes it into the next release, which would let you do exactly that!

Telroshan avatar Nov 26 '24 07:11 Telroshan

Closing this, as multiple extended selectors support was added in #2902, released alongside htmx 2.0.4

Telroshan avatar Dec 16 '24 09:12 Telroshan