<input> elements in an {#if} that depends on the input value do not fire on:input before they disappear

[pal03377]

Describe the bug
When you create an input that can be removed because of an if clause around it that depends on the input value, the last on:input event of the is not fired because it seems to disappear too quickly.

Logs

To Reproduce
Minimal example: Remove the text in the input field character by character. For the last input event (the last BackSpace keystroke), no event is fired and onInput is not called.

https://svelte.dev/repl/8d8bde660dea46f6b5443fe701cabd2b?version=3.16.7

Expected behavior
Before the input field disappears, one last input event is fired and value: is output into the console.

Information about your Svelte project:

• Browser: Google Chrome version 79.0.3945.88

• Operating System: Windows 10

• Svelte version: 3.16.7 (newest release)

• Webpack or Rollup: not needed to reproduce the bug (REPL pad)

Severity
Not so high: It's just a bit confusing, as I would expect the last input event to fire. This can easily be fixed manually by using display: none CSS instead of a Svelte {#if} clause.

Manual fix with display: none demo (also demonstrating the expected behavior): https://svelte.dev/repl/78fd0c98c9cf4f3fab2c7e6f43cf7fe3?version=3.16.7

[JohnnyFun]

Could you use keydown instead?

Or just watch the value with a reactive statement instead of an event handler on the input like: $: inputValue, onInput()

Both of those approaches console logged the last empty value as expected for me.

[Conduitry]

On Firefox, the final empty log does appear before the element is removed, if that means anything. It's unfortunate that the behavior differs between browsers, but it's really an edge case, and I can't really say which behavior I'd consider more correct.

[pal03377]

Could you use keydown instead?

That works, however with this approach an input change event is never fired if the user just cuts all the text with Right Click -> Cut.

Or just watch the value with a reactive statement instead of an event handler on the input like: $: inputValue, onInput()

This is a good solution and seems to work in all cases. 👍

[antony]

This reminds me of #3249 - possibly related?

[pal03377]

This reminds me of #3249 - possibly related?

#3249 looks very similar to this issue. However, (if I understand that correctly) it is about a bind:group binding not being applied instead of an event not being fired - which may be very similar things under the hood in Svelte, I honestly don't know the internals as well as you.

In #3249, the problem seems to be that the on:click event is handled too fast (therefore toggling the menu before the radiobutton value is updated), while in this issue here, the on:input event is fired too slow (so it isn't fired because the value update already causes the element to disappear before that, at least on Chrome).

Also, if this comes down to the same underlying issue, I hope it is a bit easier to find with my more simple REPL. :-)

(and I could reproduce #3249 in Firefox but as @Conduitry already discovered couldn't reproduce this issue in Firefox)

[pushkine]

putting the binding before the event listener causes the binding dependencies to update first
you can get wanted behavior simply by placing the event listener before the binding
https://svelte.dev/repl/d5e1b886ee4c4bb88fbbe3deb72fd8f3?version=3.19.0
this issue suggests that svelte should wait a tick before unmouting components