Advertisement
Guest User

Elm - input[disabled] with onClick

a guest
Mar 17th, 2017
148
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import Html exposing (..)
  2. import Html.Events exposing (onClick, onInput)
  3. import Html.Attributes exposing (id, type_, value, disabled, style)
  4.  
  5. main =
  6.   beginnerProgram { model = initModel, view = view, update = update }
  7.  
  8. {-- Model --}
  9. type alias Model =
  10.   { savedValue: String
  11.   , currentValue: String
  12.   , isEditing: Bool
  13.   }
  14.  
  15. initModel : Model
  16. initModel =
  17.   let str = "click to edit"
  18.   in
  19.     { savedValue = str
  20.     , currentValue = str
  21.     , isEditing = False
  22.     }
  23.  
  24. {-- Message--}
  25. type Msg =
  26.   StartEdit
  27.   | UpdateCurrentValue String
  28.   | SaveChanges
  29.  
  30. {-- Update --}
  31. update : Msg -> Model -> Model
  32. update msg model =
  33.   case msg of
  34.     StartEdit -> startEdit model
  35.     SaveChanges -> saveChanges model
  36.     UpdateCurrentValue val -> updateCurrentValue model val
  37.  
  38. startEdit : Model -> Model
  39. startEdit model = { model | isEditing = True }
  40.  
  41. updateCurrentValue : Model -> String -> Model
  42. updateCurrentValue model val = { model | currentValue = val }
  43.  
  44. saveChanges : Model -> Model
  45. saveChanges model =
  46.   { model
  47.   | isEditing = False
  48.   , savedValue = model.currentValue
  49.   }
  50.  
  51. {-- View --}
  52. view : Model -> Html Msg
  53. view model =
  54.   div [ style [ ( "padding", "15px" ) ] ]
  55.     [ if model.isEditing
  56.       then div [] (enabledInput model)
  57.       else div [] (disabledInput model)
  58.     , h1 [] [ text "onClick with disabled attribute" ]
  59.     , p [] [ text txtOnClick ]
  60.     , h3 [] [ text "Debug info" ]
  61.     , pre [] [ text <| "Model " ++ (toString model) ]
  62.     ]
  63.  
  64. txtOnClick =
  65.   "Input with disabled attribute doesn't trigger onClick. " ++
  66.   "Try change 'disabled True' to 'disabled False' (:line 76:) " ++
  67.   "and onClick works. Is there workaround?"
  68.  
  69. disabledInput : Model -> List (Html Msg)
  70. disabledInput model =
  71.   [ input
  72.     [ id "my-input"
  73.     , type_ "text"
  74.     , value model.currentValue
  75.     -- vvvvvvvvvvvv Edit this
  76.     , disabled True -- <<< Try to edit this line
  77.     -- ^^^^^^^^^^^^ Try set this to False
  78.     , onClick StartEdit
  79.     ] [] ]
  80.  
  81. enabledInput : Model -> List (Html Msg)
  82. enabledInput model =
  83.   [ input
  84.     [ id "my-input"
  85.     , type_ "text"
  86.     , value model.currentValue
  87.     , onInput UpdateCurrentValue
  88.     ] []
  89.   , button
  90.     [ type_ "button"
  91.     , onClick SaveChanges
  92.     ] [ text "Save changes" ]
  93.   ]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement