[elm-discuss] How to enforce Elm to recreate HTML tags instead of reusing existing tags?

[Kadzuya OKAMOTO]

Here is an example app to explain this problem.
https://ellie-app.com/c5X3fGFPha1/1

In this example, a popup window flashes unexpectedly when "Tab B" is
clicked.
The reason why this occurs, I guess, is bellow.

* "Tab B" is clicked
* Elm tries to reuse HTML tag (in this case the tag of the age field).
* It causes `addAttribute("aria-hidden", "true")` on the tag
* CSS transition fires because `aria-hidden` attribute was changed

To prevent this unexpected phenomenon, I'm looking for a way to prohibit
Elm to reuse existing tags.
Is any workaround for this?
Or is my hypothesis above wrong?

I believe this is a usual requirement especially when we use
`elm-lang/navigation` package to realize SPA routing.

[Peter Damoc]

Use Html.Keyed for managing the troublesome kids.

Here is your example adapted based on your feedback that it is the age
field that's the problem.
https://ellie-app.com/czbx9WRyDa1/0

Post by Kadzuya OKAMOTO
Here is an example app to explain this problem.
https://ellie-app.com/c5X3fGFPha1/1
In this example, a popup window flashes unexpectedly when "Tab B" is
clicked.
The reason why this occurs, I guess, is bellow.
* "Tab B" is clicked
* Elm tries to reuse HTML tag (in this case the tag of the age field).
* It causes `addAttribute("aria-hidden", "true")` on the tag
* CSS transition fires because `aria-hidden` attribute was changed
To prevent this unexpected phenomenon, I'm looking for a way to prohibit
Elm to reuse existing tags.
Is any workaround for this?
Or is my hypothesis above wrong?
I believe this is a usual requirement especially when we use
`elm-lang/navigation` package to realize SPA routing.
--
You received this message because you are subscribed to the Google Groups
"Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an
For more options, visit https://groups.google.com/d/optout.

[Kadzuya OKAMOTO]

This is what I wanted.
Thanks very much!

Post by Peter Damoc
Use Html.Keyed for managing the troublesome kids.
Here is your example adapted based on your feedback that it is the age
field that's the problem.
https://ellie-app.com/czbx9WRyDa1/0

Post by Kadzuya OKAMOTO
Here is an example app to explain this problem.
https://ellie-app.com/c5X3fGFPha1/1
In this example, a popup window flashes unexpectedly when "Tab B" is
clicked.
The reason why this occurs, I guess, is bellow.
* "Tab B" is clicked
* Elm tries to reuse HTML tag (in this case the tag of the age field).
* It causes `addAttribute("aria-hidden", "true")` on the tag
* CSS transition fires because `aria-hidden` attribute was changed
To prevent this unexpected phenomenon, I'm looking for a way to prohibit
Elm to reuse existing tags.
Is any workaround for this?
Or is my hypothesis above wrong?
I believe this is a usual requirement especially when we use
`elm-lang/navigation` package to realize SPA routing.
--
You received this message because you are subscribed to the Google Groups
"Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an
For more options, visit https://groups.google.com/d/optout.

--
There is NO FATE, we are the creators.
blog: http://damoc.ro/
--
You received this message because you are subscribed to a topic in the
Google Groups "Elm Discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/
topic/elm-discuss/RwYF8CAdMWA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to
For more options, visit https://groups.google.com/d/optout.