events - 事件上的奇怪行为(Html.Events.on)

Question

我正在制作一个“流体”文本区域，它根据内容调整其高度。我实际上正在尝试实现 this脚本。我有以下代码:https://ellie-app.com/Vjtvm6yrKWa1/4

问题是，当增加高度时，它可以正常工作，但是当尝试降低高度时，它无法按预期工作。

如何重现问题:

1. 文本区域带有默认文本。如果您单击文本区域，它将根据内容调整其高度。
2. 删除一半文本或整个文本。
3. 再次单击文本区域。预期的行为是它应该再次调整其高度，减少其高度，但事实并非如此。它要么什么也不做，要么只是稍微降低高度(让你必须点击很多次，直到高度合适)

我认为这与 virtual-dom 阻止滚动高度改变有关，类似于缓存(性能方面)，但这只是一个猜测。

我的问题可能是什么？

Ps.当尝试使用其他类型的事件(例如“输入”或“更改”)时，也会出现此问题。

Answer 1

编辑 4/20:Slack channel 上的 ilias 链接到此:https://ellie-app.com/H5x9DC4J9ba1/0 (纯Elm自动展开文本区域的Ellie)

=====

我怀疑这是解码器的问题。

请注意，在 JS 示例中，当文本区域内容更改时，会执行 2 件事来获取新的高度:

-- 将 textarea..height 设置为 auto
-- 获取文本区域..scrollHeight。

如果不首先设置为 auto，JS 示例也会表现出您在 Elm 示例中看到的行为。

现在请注意 Elm 示例中的事件顺序:

1--删除一些文本行
2--点击文本区域；这会计算当前高度(在将高度设置为auto之前)
3-- ...然后调度 HeightChange
4-- ...它调度 AutoHeight，然后使用步骤 2 中的旧高度来调度 UpdateHeight

因此，我再次怀疑这是解码器的问题。要进行检查，请参阅以下(快速/肮脏)Ellie - 它会在 auto 和计算的高度之间切换高度，您将看到每隔一次单击就会计算出正确的高度:https://ellie-app.com/WwBDfDvhypa1/0

(旁白:Elm可能合并在同一动画帧中排队的值，不知道是否查看源代码，但这仍然不是重点。)