aforemny/material-components-web-elm

Missing onBlur in TextField

Closed this issue · 2 comments

Is there a way to do onBlur that I'm missing? If not, I'll try to add it.

I just realized there's a setAttributes function, so I tried to use it to handle onBlur but it didn't work. The onBlur event gets attached to the mdc-text-field__input node, not the inner input.

<mdc-text-field class="mdc-text-field mdc-text-field--no-label mdc-text-field--outlined"> <!-- onBlur gets added here -->
  <input class="mdc-text-field__input" required="" min="" max="" step=""> <!-- I think it needs to be added here -->
  <span class="mdc-notched-outline mdc-notched-outline--no-label">
    <span class="mdc-notched-outline__leading"></span>
    <span class="mdc-notched-outline__notch"></span>
    <span class="mdc-notched-outline__trailing"></span>
  </span>
</mdc-text-field>

In case it's relevant, the change I made in #158 works and adds the onBlur event to the inner input.

Elm code, in case it's relevant

    Html.div
        [ style "display" "flex"
        , style "flex-direction" "column"
        ]
        ([ Html.label [ Theme.textHintOnLight, style "margin-bottom" ".25rem" ] [ Html.text label ]
         , TextField.outlined
            (TextField.config
                |> TextField.setLabel Nothing
                |> TextField.setOnInput onInput
                |> TextField.setAttributes [ Events.onBlur onBlur ]
                |> TextField.setValue (Just value)
                |> TextField.setRequired required
                |> TextField.setValid (errorValue == "")
            )
         ]
            ++ errorText
        )

Fixed with #176.