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

Closed
mtlynch opened this issue Jun 22, 2024 · 4 comments
Closed

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

mtlynch opened this issue Jun 22, 2024 · 4 comments

Comments

@mtlynch
Copy link
Contributor

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

@tbuckley
Copy link

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/

@Telroshan
Copy link
Collaborator

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

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

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

3 participants