Skip to content

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

Description

@mtlynch

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions