aforemny / aforemny/material-components-web-elm

Helper line character count is ignored when TextField is created first

Offen
#122 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
bug
Vorherrschende Sprache
Elm
Sterne
93
Forks
20
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

MCVE (https://ellie-app.com/9R5Smys9fjga1):
```elm
module Main exposing (main)

import Material.TextField as TextField
import Material.HelperText as HelperText
import Material.Button as Button
import Html as H
import Browser

type alias Model = Bool
type Msg = Show

main =
Browser.sandbox
{ init = True
, update = update
, view = view
}

update msg model = not model

view model =
let
tf =
case model of
True -> H.div []
[ TextField.filled (TextField.config |> TextField.setMaxLength (Just 10))
, HelperText.helperLine [] [HelperText.characterCounter []]
]
False -> H.div [] []
in
H.div []
[ Button.text (Button.config |> Button.setOnClick Show) "Show / Hide"
, tf
]
```
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 the `mdc-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).

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.