Strange behavior in event (Html.Events.on)
I am creating a "liquid" text area that changes its height according to its content. I am actually trying to implement this script. I have the following code: https://ellie-app.com/Vjtvm6yrKWa1/4
The problem is that when zoomed in, it works without issue, but when trying to decrease the height, it doesn't work as expected.
How to reproduce the problem:
- The text box contains the default text. If you click on the text box, it will change its height to content.
- Delete half of the text or all of the text.
- Click again in the text box. The expected behavior is that it should change its height again, giving back the height, but it is not. It does nothing, or decreases the height a little (forcing you to click many times until the height is normal).
I think it has something to do with virual-dom preventing scrollHeight from changing, sort of a cache (in terms of performance), but this is just a guess.
What could be my problem?
Ps. When trying to use other types of events, such as "enter" or "change", this problem also occurs.
source to share
EDIT 4/20 : ilias on the Slack channel related to this: https://ellie-app.com/H5x9DC4J9ba1/0 (Ellie of Elm's clean auto-update text area)
=====
I doubt this is a decoder problem.
Note that in the JS example, when the content of the textarea changes, two things are done to get the new height:
- set textarea..height to auto
- get textarea..scrollHeight.
Without pre-installation, the auto
example JS also shows the behavior you see in the Elm example.
Now, notice the sequence of events in the Elm example:
1 - delete some lines of text
2 - click the text box; this calculates the current height (before setting the height to auto
)
3 --... then sends HeightChange
4 --... which sends AutoHeight
, then UpdateHeight
with the old height from step 2
So, again, I doubt this is a decoder issue. To check, see the following (quick / dirty) Ellie - she switches the height between auto
and the calculated height and you will see the correct height is calculated through each click: https://ellie-app.com/WwBDfDvhypa1/0
(Alternatively, Elm can combine the values queued for the same animation frame, dunno w / o look at the source, but that's still near the point here.)
source to share
I checked the code and the problem is indeed with the decoder scrollHeight
. Each time it is pressed, it decreases the value by only 2 pixels . Example: 424, 422, 420
.. and so on. Not real value.
I don't know why, I can't find any docs regarding this issue, but you can provide almost the same functionality using keypress event
. This is the required function:
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 both isBackspace
and targetHeight
will decode successfully at the same time.
And add this event to the view:
Html.textarea [ style model , onClick HeightChange , whenBackspacePressed_ReceiveScrollHeight HeightChange , onInput TextChange, .. etc
It works by pressing the back side. But not instantly in the way you want, check here: ellie.app ..
source to share