[4.0.0] Settle removes attributes set on swapped-in elements during the settle delay
I maintainer di solito rispondono entro 4 giorni
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 2/5
- Tempo stimato
- 1-3 ore
- Idoneità per principianti
- 78/100
- Tipo di issue
- Bug
- Chiarezza
- Specificata chiaramente
- Stato di attività
- Attiva
- Stack tecnologico
- javascript
- Ambito
- frontend
Direzione di ricerca
L’issue indica __startCSSTransitions, il relativo task di ripristino e __copyAttributes; inizia a individuarli nel codice sorgente di htmx e confronta il comportamento di ripristino con la restrizione a quattro attributi aggiunta da #4056. Riproduci il problema con i due file HTML forniti e defaultSettleDelay al suo valore predefinito. Il lavoro è completato quando gli attributi impostati da MutationObserver rimangono dopo il settle e il comportamento di transizione esistente continua a funzionare.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
An attribute that a script sets on a swapped-in element between the swap and the end of the settle delay is removed
when settle finishes. This breaks libraries that initialise new elements from a MutationObserver (Alpine.js, for
example), when the element has an id that the old content also had.
Reproduce
Serve these two files (python3 -m http.server), open index.html and click Reload menu.
index.html
<!doctype html>
<html>
<head><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/htmx.js"></script></head>
<body>
<button hx-get="menu.html" hx-target="#menu">Reload menu</button>
<div id="menu"><button id="trigger">Options</button></div>
<script>
// Stands in for a component library that initialises new elements from a MutationObserver
const init = () => document.getElementById('trigger').setAttribute('aria-expanded', 'false');
new MutationObserver(init).observe(document.body, {childList: true, subtree: true});
init();
</script>
</body>
</html>
menu.html
<button id="trigger">Options</button>
- Expected:
<button id="trigger" aria-expanded="false">, as in htmx 2. - Actual:
<button id="trigger">
What happens to #trigger
| Step | htmx 2.0.11 | htmx four-dev (08c9c82d, includes #4056) |
|---|---|---|
| before the request | <button id="trigger" aria-expanded="false"> |
<button id="trigger" aria-expanded="false"> |
| swapped in | <button id="trigger" class="htmx-added"> |
<button id="trigger"> |
| MutationObserver sets the attribute | <button id="trigger" class="htmx-added" aria-expanded="false"> |
<button id="trigger" class="htmx-added" aria-expanded="false"> |
| after settle | <button id="trigger" aria-expanded="false"> |
<button id="trigger"> |
htmx 4.0.0 ends the same way. There, the swap first copies aria-expanded over from the old element.
Cause
The restore task in __startCSSTransitions calls __copyAttributes(elt, clone), which removes every attribute the
response's markup doesn't have. htmx 2's cloneAttributes only touched class, style, width and height.
#4056 limited the first copy to those four attributes; the restore task needs the same restriction. Setting
defaultSettleDelay: 0 works around it.
- Lingua principale
- JavaScript
- Stelle
- 49.6k
- Fork
- 1.8k
- Merge medio
- 3g 9h
- PR unite (30g)
- 8
Preparare l'ambiente
- Nessun Dockerfile né file Docker Compose
- Ha un modello di pull request
- Leggi la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di bigskysoftware/htmx
-
Only the first `from:body target:` trigger fires when there are two on htmx 2Forse già presa Una pull request collegata a questa issue è aperta o già unita. Aperta
Difficoltà 2/5 1-3 ore Idoneità per principianti 70/100
bigskysoftware/htmx#4155 ·
I maintainer di solito rispondono entro 4 giorni
-
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 88/100
bigskysoftware/htmx#4151 · 2 commenti ·
I maintainer di solito rispondono entro 4 giorni
-
[htmx4] Swap style for boosted elements is not outerSyncForse già presa @1cg l’ha presa 17 giorni fa. Aperta
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
bigskysoftware/htmx#4138 · 3 commenti · 1 assegnatario ·
I maintainer di solito rispondono entro 4 giorni
-
No GitHub Release for version 2.0.11Forse già presa @1cg l’ha presa 17 giorni fa. Aperta
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 75/100
bigskysoftware/htmx#4117 · 1 assegnatario ·
I maintainer di solito rispondono entro 4 giorni
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 65/100
bigskysoftware/htmx#4068 · 4 commenti ·
I maintainer di solito rispondono entro 4 giorni
Tutte le issue di bigskysoftware/htmx
Issue simili
-
Site Suggestion: bullseyeAperta
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 65/100
I maintainer di solito rispondono entro 1 giorno
-
Add toro4n to the data modeling toolsForse già presa @henriklantzhedstrom-prog l’ha presa oggi. Aperta
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 62/100
neo4j/docs-getting-started#546 ·
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 65/100
I maintainer di solito rispondono entro 25 giorni
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 70/100
libnativeapi/nativeapi#21 ·
-
area: core complexity: easy impact: medium
Difficoltà 2/5 1-3 ore Idoneità per principianti 86/100
ueberdosis/tiptap#8668 ·
I maintainer di solito rispondono entro 1 giorno