Calling function on element which matches an 'attribute equals value' query

This issue has been tracked since 2022-08-10.

Greetings,

I'm having trouble scrolling to an element which matches an attribute value. This is what I have:

on bookUpdated scrollIntoView({block: 'center'}) the [@data-id='{{ b.id }}']
then send click to <#update-book-form #cancel-button />

I have also tried:

on bookUpdated scrollIntoView({block: 'center'}) the <[data-id='{{ b.id }}'] />
then send click to <#update-book-form #cancel-button />

Both fail with scrollIntoView({block: 'center'}) the [@data-id='70735b47-4300-451f-aaa6-e5d50ef60688']' is null. If I replace the attribute query with a simple id match the function call is successful, something like:

on bookUpdated scrollIntoView({block: 'center'}) the #books
then send click to <#update-book-form #cancel-button />

Unfortunately, I'm not able to use the id attribute because they are not allowed to start with a number, and I'm using UUIDs for my resource which do sometimes.

I have also tried to insert a wait 5s before the function call just to make sure the element I'm trying to scroll to was settled into the DOM, same error.

Any comment appreciated, thank you.

dz4k wrote this answer on 2022-08-18
on bookUpdated scrollIntoView({block: 'center'}) the <[data-id='${b.id}'] />
yvesnrb wrote this answer on 2022-08-18

I've tried to hardcode the ID to eliminate any possible mistakes in that regard but ended up with the same problem. I'm also waiting for five seconds to eliminate any race condition with the HTMX swap this is supposed to follow.

on bookUpdated wait 5s
then scrollIntoView({block: 'center'}) the <[data-id='55e204b8-b6a7-48c9-ab6e-553cc11cfd6a'] />
then send click to <#update-book-form #cancel-button />

These are the errors I end up with:

image

Is there any place already setup where I can create a reproducible example? Something like code sandbox.

yvesnrb wrote this answer on 2022-08-18

I've also tried

on bookUpdated wait 5s
then log <[data-id='55e204b8-b6a7-48c9-ab6e-553cc11cfd6a'] />
then send click to <#update-book-form #cancel-button />

Which does produce a log:

image

More Details About Repo
Owner Name bigskysoftware
Repo Name _hyperscript
Full Name bigskysoftware/_hyperscript
Language JavaScript
Created Date 2020-05-27
Updated Date 2022-11-25
Star Count 1265
Watcher Count 18
Fork Count 75
Issue Count 86

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date