Textfield should support more DOM event handlers

[debois]

From @OvermindDL1 at https://groups.google.com/d/msg/elm-discuss/pNPVxrz_jlE/z_zaaattAwAJ :

Do not see an example or demonstration code that shows this, but how can I get an Enter keypress from a single line Textfield, and how can I distinguish it from a Shift+Enter keypress in a multiline Textfield, or how can I get the event data?

[OvermindDL1]

Yeah there does not seem to be a way to set generic on handlers like in Html.Events, and it is playing havoc with my ability to get data...

[vipentti]

@OvermindDL1 I'm currently working on this; Are you simply looking for onEnter or would onKeyUp work? What kind of use case are you looking at ?

Currently thinking something like

-- Event
type alias KeyEvent =
  { shift : Bool
  , keyCode : Int
  }

-- In your own update Add event listener 
  | KeyUp Textfield.KeyEvent

-- To component as well 
   Textfield.onKeyUp KeyUp

-- Then in update 

  KeyUp { shift, keyCode } ->
      case keyCode of 
        13 -> if shift then "shift + enter" else "just enter"
        _ -> ""

This does not stopPropagation and does not preventDefaults so if you want to actually intercept enter and prevent that from adding new lines that does require some extra functionality.

[OvermindDL1]

Something like onKeyUp would be perfect, I do have plans for some extra things later. I would especially love if the KeyEvent also had a selection range, something like:

type alias KeyEvent =
  { shift : Bool
  , keyCode : Int
  , selection_range : { start : Int, end : Int }
  }

Right now I have to get the selection range onChange via a port, which is hacky since I cannot make my own on events right now to do custom json decoding of the event (would love that!)

[debois]

@vipentti: Is there some way we can avoid duplicating large parts of Html.Event?

[OvermindDL1]

If there is some way in the API to drop a lot of the Material specific html things and use Html.* itself that would be best. Making my own 'on' handlers again would be fantastic.

[vipentti]

Support for custom events should be available in the next (minor) version

[OvermindDL1]

Having a way to have custom event handlers on any type would be fantastic though, like normal elm-html. I have to keep changing back to Html stuff and hacking in material things into it for my onScroll events for example. ^.^

[debois]

Fixed in 7.3.0; nice example use here (last example).

@OvermindDL1: Are you aware of Options.attribute? You can use it with Options.div et. al. to install arbitrary attributes on styled Html elements:

    Options.div 
      [ Options.attribute <| Html.onClick MyClickEvent ]
      [ text "I'll know if you click me!" ]

We can't support arbitrary handlers on all components, because user handlers could conflict with internal ones (i.e., buttons need to take care focus/blur internally; if the user sets his own blur handler, they stop working).

[OvermindDL1]

Ah I was wondering what that was for. Is there no way to iterate over the attributes and remove user supplied 'onBlur' and such things, or to hoist them 'into' your callback so both get called? That way getting rid of the Options special stuff entirely?

[vipentti]

I had some ideas about adding support for user defined events on a larger scale but haven't had a time to experiment with it yet.

[debois]

That'd be awesome! I'd love to be part of discussing how to do that also, here or on slack :)