aforemny / aforemny/material-components-web-elm
Helper line character count is ignored when TextField is created first
- Linguagem predominante
- Elm
- Estrelas
- 93
- Forks
- 20
- Métricas de merge de PRs
- Nenhum PR com merge em 30d
Descrição
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).
Guia de contribuição
Nenhum guia de contribuição indexado para este repositório
Avaliação
Esta issue ainda não foi avaliada.