Adds onFocus helper

src/Nri/Ui/TextInput/V7.elm

@@ -2,7 +2,7 @@ module Nri.Ui.TextInput.V7 exposing
     ( view, generateId
     , number, float, text, newPassword, currentPassword, email, search
     , value, map
-    , onBlur, onEnter
+    , onFocus, onBlur, onEnter
     , Attribute, placeholder, hiddenLabel, autofocus
     , css, custom, nriDescription, id, testId, noMargin
     , disabled, loading, errorIf, errorMessage, guidance
@@ -35,7 +35,7 @@ module Nri.Ui.TextInput.V7 exposing
 
 ### Event handlers
 
-@docs onBlur, onEnter
+@docs onFocus, onBlur, onEnter
 
 
 ## Attributes
@@ -328,6 +328,13 @@ hiddenLabel =
         \config -> { config | hideLabel = True }
 
 
+{-| Causes the TextInput to produce the given `msg` when the field is focused.
+-}
+onFocus : msg -> Attribute value msg
+onFocus msg =
+    Attribute { emptyEventsAndValues | onFocus = Just msg } identity
+
+
 {-| Causes the TextInput to produce the given `msg` when the field is blurred.
 -}
 onBlur : msg -> Attribute value msg
@@ -423,6 +430,7 @@ type alias EventsAndValues value msg =
     , toString : Maybe (value -> String)
     , fromString : Maybe (String -> value)
     , onInput : Maybe (String -> msg)
+    , onFocus : Maybe msg
     , onBlur : Maybe msg
     , onEnter : Maybe msg
     , floatingContent : Maybe (FloatingContentConfig msg -> Html msg)
@@ -434,6 +442,7 @@ emptyEventsAndValues =
     { currentValue = Nothing
     , toString = Nothing
     , fromString = Nothing
+    , onFocus = Nothing
     , onBlur = Nothing
     , onEnter = Nothing
     , onInput = Nothing
@@ -448,6 +457,7 @@ map f toString (Attribute eventsAndValues configF) =
         { currentValue = Maybe.map f eventsAndValues.currentValue
         , toString = Just toString
         , fromString = Maybe.map (\from -> from >> f) eventsAndValues.fromString
+        , onFocus = eventsAndValues.onFocus
         , onBlur = eventsAndValues.onBlur
         , onEnter = eventsAndValues.onEnter
         , onInput = eventsAndValues.onInput
@@ -528,6 +538,7 @@ applyEvents =
             { currentValue = orExisting .currentValue eventsAndValues existing
             , toString = orExisting .toString eventsAndValues existing
             , fromString = orExisting .fromString eventsAndValues existing
+            , onFocus = orExisting .onFocus eventsAndValues existing
             , onBlur = orExisting .onBlur eventsAndValues existing
             , floatingContent = orExisting .floatingContent eventsAndValues existing
             , onEnter = orExisting .onEnter eventsAndValues existing
@@ -654,6 +665,7 @@ view label attributes =
                    , Attributes.value stringValue
                    , Attributes.disabled disabled_
                    , maybeAttr Events.onInput eventsAndValues.onInput
+                   , maybeAttr Events.onFocus eventsAndValues.onFocus
                    , maybeAttr Events.onBlur eventsAndValues.onBlur
                    , Attributes.autofocus config.autofocus
                    , maybeAttr type_ config.fieldType

styleguide-app/Examples/TextInput.elm

@@ -38,7 +38,7 @@ example =
                 exampleConfig =
                     Control.currentValue state.control
 
-                toExample { name, toString, inputType, onBlur, onEnter } index =
+                toExample { name, toString, inputType, onFocus, onBlur, onEnter } index =
                     ( name
                     , TextInput.view exampleConfig.label
                         (exampleConfig.attributes
@@ -48,7 +48,12 @@ example =
                                , TextInput.value (Maybe.withDefault "" (Dict.get index state.inputValues))
                                ]
                             ++ List.filterMap identity
-                                [ if exampleConfig.onBlur then
+                                [ if exampleConfig.onFocus then
+                                    Just (TextInput.onFocus (SetInput index onFocus))
+
+                                  else
+                                    Nothing
+                                , if exampleConfig.onBlur then
                                     Just (TextInput.onBlur (SetInput index onBlur))
 
                                   else
@@ -69,6 +74,7 @@ example =
                     { name = "text"
                     , toString = identity
                     , inputType = TextInput.text
+                    , onFocus = "Focused!!!"
                     , onBlur = "Blurred!!!"
                     , onEnter = "Entered!!!"
                     }
@@ -76,6 +82,7 @@ example =
                     { name = "number"
                     , toString = Maybe.map String.fromInt >> Maybe.withDefault ""
                     , inputType = TextInput.number
+                    , onFocus = "1234"
                     , onBlur = "10000000"
                     , onEnter = "20000000"
                     }
@@ -83,6 +90,7 @@ example =
                     { name = "float"
                     , toString = Maybe.map String.fromFloat >> Maybe.withDefault ""
                     , inputType = TextInput.float
+                    , onFocus = "123"
                     , onBlur = "1.00000001"
                     , onEnter = "100000001.1"
                     }
@@ -96,6 +104,7 @@ example =
                                 , showPassword = state.showPassword
                                 , setShowPassword = SetShowPassword
                                 }
+                    , onFocus = "Focused!!!"
                     , onBlur = "Blurred!!!"
                     , onEnter = "Entered!!!"
                     }
@@ -103,6 +112,7 @@ example =
                     { name = "email"
                     , toString = identity
                     , inputType = TextInput.email
+                    , onFocus = "Focused!!!"
                     , onBlur = "Blurred!!!"
                     , onEnter = "Entered!!!"
                     }
@@ -110,6 +120,7 @@ example =
                     { name = "search"
                     , toString = identity
                     , inputType = TextInput.search
+                    , onFocus = "Focused!!!"
                     , onBlur = "Blurred!!!"
                     , onEnter = "Entered!!!"
                     }
@@ -138,6 +149,7 @@ init =
 type alias ExampleConfig =
     { label : String
     , attributes : List (TextInput.Attribute String Msg)
+    , onFocus : Bool
     , onBlur : Bool
     , onEnter : Bool
     }
@@ -148,6 +160,7 @@ initControl =
     Control.record ExampleConfig
         |> Control.field "label" (Control.string "Assignment name")
         |> Control.field "attributes" controlAttributes
+        |> Control.field "onFocus" (Control.bool False)
         |> Control.field "onBlur" (Control.bool False)
         |> Control.field "onEnter" (Control.bool False)