Input.text doesn't reflect it's value in the UI

[paulsonnentag]

The big picture of what I'm trying to do

I want to be able to change the value of a text field by changing the value in the model. In my application the changes didn't get reflected in the displayed value of the input field.

What I did

I've created an minimal example where I set the value of the input field to a fixed value:

https://ellie-app.com/N7Np2wTJjBa1

What I Expected To Happen

The text in the input field shouldn't change when the user tries to enter text.

What Actually Happened

The text in the input field changes when the user enters text. This leads to a discrepancy between the defined view and the rendered ui.

I think that the problem is that the value get's set as an attribute and not a property

If I inspect the element with the devtools in chrome the correct value is set (123)

The property "value" has the wrong value

$0.value // = "123asdf"

The attribute "value" has the correct value

$0.getAttribute("value") // 123

Versions

• Elm: 0.18
• style-elements: 4.3.0
• Browser: This problem occurs in multiple browsers
• Operating System: macOS 10.13.5

[paulsonnentag]

As a temporary workaround I've added the value as a property

Input.text None
                [ property "value" (Encode.string model.text) -- set value explicitly as property
                ]
                { onChange = ChangeInput
                , value = model.text
                , label =
                    Input.placeholder
                        { label = Input.labelLeft (el None [ ] (text "Search"))
                        , text = "placeholder"
                        }
                , options = []
                }