bigskysoftware / htmx

</> htmx - high power tools for HTML
https://htmx.org
Other
38.56k stars 1.31k forks source link

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

Open mtlynch opened 5 months ago

mtlynch commented 5 months ago

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)
Telroshan commented 5 months ago

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