Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Textfield floating / placeholders don't disapear. #364

Closed
hickscorp opened this issue Jan 2, 2018 · 1 comment
Closed

Textfield floating / placeholders don't disapear. #364

hickscorp opened this issue Jan 2, 2018 · 1 comment

Comments

@hickscorp
Copy link

hickscorp commented Jan 2, 2018

I'm observing a very odd behavior.

  • When typing text in a textfield, the label moves away to the top (Cool).
  • If I remove the text and blur, the placeholder moves back into the field (Cool).
  • But if I have text in the field when I blur it, the placeholder still goes back to normal on top of the text (Unexpected).

Here is a screenshot after placing text in all the fields. As you can see, the issue doesn't occur with multilines.

image

EDIT: I am providing a full Elm file to make sure you can test easily:

module Pages.Signup exposing (Model, Msg, model, update, view)

import Material
import Material.Grid as Grid exposing (..)
import Material.Textfield as Textfield
import Material.Options as Options
import Html exposing (Html, h3, div, input, text)
import Regex


type alias Model =
    { email : String
    , password : String
    , passwordAgain : String
    , address : String
    , mdl : Material.Model
    }


type PasswordVersion
    = Original
    | Confirmation


type Msg
    = Email String
    | Password PasswordVersion String
    | Mat (Material.Msg Msg)


invalidEmail : String -> Bool
invalidEmail email =
    let
        rx =
            Regex.regex "^(([^<>()\\[\\]\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$"
                |> Regex.caseInsensitive
    in
        Regex.contains rx email
            |> not


model : Model
model =
    { email = ""
    , password = ""
    , passwordAgain = ""
    , address = ""
    , mdl = Material.model
    }


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Email email ->
            { model | email = email } ! []

        Password version password ->
            case version of
                Original ->
                    { model | password = password } ! []

                Confirmation ->
                    { model | passwordAgain = password } ! []

        Mat msg_ ->
            Material.update Mat msg_ model


view : Model -> Html Msg
view model =
    grid []
        [ cell
            [ size Desktop 4, offset Desktop 1 ]
            [ Textfield.render Mat
                [ 0 ]
                model.mdl
                [ Textfield.label "Email Address"
                , Options.onInput Email
                , Textfield.floatingLabel
                , Textfield.error ("Doesn't look like a valid email address.")
                    |> Options.when (invalidEmail model.email)
                ]
                []
            , Textfield.render Mat
                [ 1 ]
                model.mdl
                [ Textfield.label "Password"
                , Textfield.floatingLabel
                , Textfield.password
                , Options.onInput (Password Original)
                ]
                []
            , Textfield.render Mat
                [ 2 ]
                model.mdl
                [ Textfield.label "Password (Repeat)"
                , Textfield.floatingLabel
                , Textfield.password
                , Options.onInput (Password Confirmation)
                , Textfield.error ("Passwords do not match.")
                    |> Options.when (model.password /= model.passwordAgain)
                ]
                []
            , Textfield.render Mat
                [ 3 ]
                model.mdl
                [ Textfield.label "Bio - tell us a bit about you!"
                , Textfield.floatingLabel
                , Textfield.textarea
                , Textfield.rows 6
                ]
                []
            ]
        ]
@hickscorp
Copy link
Author

hickscorp commented Jan 2, 2018

Solved by providing a Textfield.value option to the components.
It'd be nice to have that as a side note in the docs maybe?

For future reference:

    Textfield.render Mat
                [ 0 ]
                model.mdl
                [ Textfield.label "Email Address"
                , Textfield.value model.email
                , Options.onInput Email
                , Textfield.floatingLabel
                ]
                []

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant