aforemny / aforemny/material-components-web-elm

Helper line character count is ignored when TextField is created first

Aberta
#122 1 comentário 0 reações 0 responsáveis Ver no GitHub
bug
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.

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.