Weird behavior on event (Html.Events.on)

Question

I'm making a "fluid" textarea, which resizes it's height according to it's content. I'm actually trying to implement this script. I have the following code: https://ellie-app.com/Vjtvm6yrKWa1/4

The issue is that when increasing, it works with no problem, but when trying to decrease height, it doesn't work as expected.

How to reproduce the issue:

1. The textarea comes with a default text. If you click on the textarea, it will resize it's height to the content.
2. Delete half of the text or the entire text.
3. Click in the textarea again. The expected behaivor is that it should resize it's height again,recuding it's height, but it doesn't. It does either nothing or reduces the height just a little (making you have to click a lot of times until the height is ok)

I think it's something related to the virual-dom preventing the scrollHeight to change, something like a cache (performance-wise), but it's only a guess.

What could be my problem?

Ps. When trying to use other kind of events, like "input" or "change", this issue also occurs.

Answer 1

EDIT 4/20: ilias on the Slack channel linked to this: https://ellie-app.com/H5x9DC4J9ba1/0 (Ellie of pure Elm autoexpannding text area)

=====

I doubt it's an issue w/ decoders.

Notice that in the JS example when textarea content changes 2 things are done to get the new height:

-- set textarea..height to auto
-- get textarea..scrollHeight.

Without first setting to auto the JS example, too, exhibits the behavior you're seeing in the Elm example.

Now notice the sequence of events in the Elm example:

1-- remove some lines of text
2-- click the textarea; this calculates current height (before setting height to auto)
3-- ... then dispatches HeightChange
4-- ... which dispatches AutoHeight, then UpdateHeight with the old height from step 2

Thus, again, I doubt it's an issue w/ a decoder. To check, see the following (quick/dirty) Ellie -- it toggles height between auto and a calculated height, and you'll see that the correct height is calculated every other click: https://ellie-app.com/WwBDfDvhypa1/0

(Aside: Elm may coalesce values queued for the same animation frame, dunno w/o looking at source, but that's still beside the point here.)

Answer 2

I've checked out the code, and indeed the problem seems to be with the scrollHeight decoder. On every click - it decreases the value by just 2 px. Ex: 424, 422, 420.. and so on. Not the real value.

I don't know why, can't find any docs regarding this issue - but you can provide almost the same functionality using keypress event. This is the function you need:

whenBackspacePressed_ReceiveScrollHeight : (Int -> msg) -> Attribute msg
whenBackspacePressed_ReceiveScrollHeight tagger =
  let
     isBackspace code =
        if code == 8 then
            Decode.succeed "Backspace pressed"
        else
            Decode.fail "is not Backspace - is this error shown anywhere?!"

    decode_Backspace =
        Decode.andThen isBackspace Html.Events.keyCode
  in
    Html.Events.on "keypress" (Decode.map2 (\key scrollHeightValue-> tagger scrollHeightValue) decode_Backspace targetHeight)

Map2 is used here to ensure that both isBackspace and the targetHeight are decoded successfully at once.

And add this event in the view :

Html.textarea 
    [ style model
    , onClick HeightChange
    , whenBackspacePressed_ReceiveScrollHeight HeightChange
    , onInput TextChange, .. etc

It works when keeping backspace pressed. But is not instantaneous in the way you want, check it out here: ellie.app ..