Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
mtlynch opened this issue Jun 22, 2024 · 1 comment
Open

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

mtlynch opened this issue Jun 22, 2024 · 1 comment

Comments

@mtlynch
Copy link
Sponsor

mtlynch commented Jun 22, 2024

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
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants