Input can't have onBlur event

[andrejsm]

The big picture of what I'm trying to do

Setting an onBlur event on an input to perform single field validation and give feedback to a user as early as possible is considered good UX. Unfortunately, currently, Text style variation msg does not allow setting onBlur attribute.

For now, the simples approach seems to add optional onBlur:

 type alias Text style variation msg =
     { onChange : String -> msg
+    , onBlur: Maybe (String -> msg)
     , value : String
     , label : Label style variation msg
     , options : List (Option style variation msg)
     }

If this is ok I can create a PR.

Versions

• style-elements: 4.3.0

[felixakiragreen]

Why don't you try creating your own function that wraps Text?

createTextWithEvents : style -> (String -> msg)
  -> msg
  -> String
  -> Element style variation msg
createTextWithEvents style inputEvent blurEvent value =
  Input.text
    style
    [ onInput inputEvent
    , onBlur blurEvent
    ]
    ( Input.Text
      inputEvent
      value
      (Input.hiddenLabel "")
      []
    )

-- then just use it by:
( createTextWithEvents
  TextInputStyle
  InputEvent
  BlurEvent
  "heyheyhey"
)

I tested it out and I get both input and blur events. Good luck.

[andrejsm]

Thanks, @dubert, but unfortunately, that's not what I need. onBlur must be of type String -> msg. But luckily I stumbled upon on. Didn't see that initially.

Managed to get what I need:

onBlur : (String -> msg) -> Attribute variation msg
onBlur msg =
    on "blur" (JD.map msg targetValue)

-- Usage example:
Input.text None [ onBlur (MyMsg "field")] opts