A bug? Weird behavior of text input fields. about purescript-halogen

[thought2]

@garyb Agree, UX wise it's not a good idea. Already dropped that idea in my real use case. So no urgency :)
However I thought it's worth mentioning here, because it might be a bug: I checked the example in React and Elm and both work according to my expectation.

In Halogen I tried onValueInput but the behavior is the same. onValueChange works after the first enter hit but not after the second.

[thomashoneyman]

You're setting the state to its same value (the value was "x", then you type "xa" and set the state to "x"), so no re-render is happening and the input field is diverging from your state. You'll see the behavior you expect so long as your state is changing. To force a state update even if you're setting the text to its same value, you could add an additional field to your state like this:

type State = { value :: String, force :: Int }

and if you are setting your new state to the same value as is present in the old state, you can also increment force. This will guarantee a state update and re-render.

[thought2]

I tried this, here's my modified code:

  (...)
  
  initialState :: i -> _
  initialState _ = { str: "", num: 0 }

  render state =
    HH.div []
      [ HH.input
          [ HA.type_ HA.InputText
          , HE.onInput (\event -> (unsafeCoerce event).target.value)
          , HA.value state.str
          ]
      , HH.text $ "state: " <> (show state)
      ]

  handleAction (msg :: String) = do
    modify_ $ \state -> { str: if msg == "xa" then "x" else msg, num: state.num + 1 }

I am still seeing the same behavior:

[garyb]

Does it work if you use HE.onValueChange? I think what's happening is the value is being captured in the event cycle too soon, so you'd have to preventDefault the event.

Both onValueChange and onValueInput give you the new value rather than the Event also, saving that questionable unsafeCoerce.

I do have one other thought on this though... don't do it 😄. From a UX perspective preventing input is bad, it's better to allow any input and show a validation message about why it's disallowed instead.