DEV Community

Elm Journey - Avoiding HTML inputs

Kasey Speakman on June 28, 2018

I have started trying to think of ways to avoid using HTML inputs in my apps when using Elm. I wanted to share more about this and where I have got...
Collapse
 
dawehner profile image
Daniel Wehner

Do you know how your approach of not using native elements works in context of accessibility?

Collapse
 
kspeakman profile image
Kasey Speakman • Edited

ARIA attributes seem to be the path forward there.

I must admit this is not something we currently code for, and thusfar no one has brought it up. However I am glad you mentioned it, and I am putting a story on our backlog for it.

Collapse
 
wking profile image
William King

Also, feel free to jump into the Elm Slack when you run into these kind of problems! There are a lot of people and teams in the community with Elm in production that have answers for all the problems you face and they are always happy to help! elmlang.herokuapp.com/

Collapse
 
kspeakman profile image
Kasey Speakman

Thanks for the comments.

I have already researched the mentioned issues with text input. You can find them recorded here:

Unreliable value due to requestAnimationFrame #107
Html.input defaultValue does not update properly when switching pages #152

The second one is why defaultValue does not work when there are multiples in a dynamic list. I tried Html.Keyed.node, but I cannot remember the outcome of that test, and it is more of a pain to use.

Collapse
 
wking profile image
William King

Yeah dynamic lists with Virtual DOM is always a fun problem! Html.Keyed is a great solution but yeah it is more code and more to keep track of. 👌

Collapse
 
wking profile image
William King

Did you get a chance to give onInput a try for text inputs? This event function specifically passes the value of the input no matter what key is pressed, or deleted, etc. package.elm-lang.org/packages/elm-...

Collapse
 
kspeakman profile image
Kasey Speakman

Thanks for the comment. Yes onInput was used. See my answer to your other comment for more details.