debois / elm-mdl

Elm-port of the Material Design Lite CSS/JS library
Apache License 2.0
963 stars 133 forks source link

Label does not float when I provide an Options.onInput #376

Closed lwheng closed 6 years ago

lwheng commented 6 years ago

I refer you to the "Labelled textfield, floating label" example for textfields. It seems that when I provide an onInput, the label won't float. Below is a screenshot when I added an Options.onInput to the textfield in your demo

[Edit] I forgot to mention that it is only after the textfield is out of focus

floating label issue

lwheng commented 6 years ago

It appears that is-dirty is not set

lwheng commented 6 years ago

My hack:

Mdl msg_ ->
    Material.update Mdl (Debug.log "msg_" msg_) model |> Just

Upd2 str ->
  let
    newModel = { model | str2 = str }
  in
    update (Mdl <| Component.TextfieldMsg [2] (Textfield.Input str)) newModel

I added a Debug.log "msg_" msg_ and observed that when I added an Options.onInput to the Textfield, the Input (Textfield's Msg) is not triggered. So this hack is to trigger it manually

lwheng commented 6 years ago

Ah.. another hack:

Textfield.render Mdl
    [ 2 ]
    model.mdl
    [ Textfield.label "Floating label"
    , Textfield.floatingLabel
    , Textfield.text_
    , Options.onInput Upd2
    , Textfield.value model.str2
    ]
    []

Notice Textfield.value model.str2. This is probably the better hack I guess

lwheng commented 6 years ago

Looks like people are just dealing it with a workaround https://github.com/debois/elm-mdl/issues/333

yhendry commented 6 years ago

The link issue/333 didn't work

lwheng commented 6 years ago

Updated the URL. Turns out I'm an idiot with markdown