Open matsjoyce opened 4 years ago
Hi @matsjoyce, thank you for reporting this! Your analysis is exactly correct, and I am aware of the following work-arounds:
Eliminate diffing on the common parent H.div
: If in the False
branch you replace the empty div with text ""
, you get back the insert behavior of the div
as a whole that also happens when you first render the page. (Ellie)
Key the common parent: By keying the common parent you can achieve the same effect. (Ellie)
Use Html.map identity
as you suggested: Thanks! I did not know this trick before. (Ellie)
I realize that this should be considered a bug in this library, and I have used the solution that you suggested in other places.
What is different about this case compared to the "select > menu > list" case is that text field and helper text components are independent of one another (both in the DOM as well as in our library), and I am not sure how I feel about that. Intuitively, I would prefer helper text functionality to be built into the text field component. I have refrained from that because it would either (conditionally) change the return type of TextField.filled
from Html m
to List (Html m)
, or would have us wrap the text field and helper text in a div
. While I would favor the first approach (realized with functions filledWithHelperText
), only the second approach could solve this issue. I quite dislike the extra level of nesting that this solution would impose on users.
So, maybe it would be feasible to just include the helper text component within the mdc-text-field
component one way or another and have both of the benefits. I will look into the feasibility of this next.
PS. Another option that I don't know how I feel about would be to initialize helper text from the text field component (as it is now), only one animation frame later. Then we could just forget about the update order of the virtual DOM implementation (at least for this most common case.)
MCVE (https://ellie-app.com/9R5Smys9fjga1):
When the page loads, the character count is visible. When the button is pressed twice (to hide and then show the text field) the character count disappears. This is because the second time, Elm's diffing algorithm decides to append the elements one by one, which means that the
mdc-text-field
element is attached to the DOM before themdc-text-field-helper-line
elements. Therefore, when the text field searches for the helper line it is not found, and the character count is not initialised.Ideally this could be fixed by adding a reciprocal search to the helper text element, so that when it is created is searches for a preceding text field to initialise from, but that may be quite a major change. The workaround for the time being is to make the DOM before and after sufficiently different that an append is not used (e.g. add
Html.map identity
until you get a unique level).