Prevents using both bind:value and on:change on the same elem (particularly input)

[tanin47]

Motivation

We've found that using both at the same time is prone to mistake because, if on:change is used, it's likely the function would lead to updating the value. This can lead to a bug in some cases.

In my case, I use on:change to fire an ajax request to update the field and then I'd update the value of the input. However, I accidentally used bind:value and the value was updated even before the ajax request is fired. We only discovered a small bug (but still a bug) because the ajax request failed, an error message was shown, but the value has been updated on the UI (through bind:value) already.

While I like the convenience of bind:value, compared to React, there's no ambiguity because it doesn't support bind:value. This makes me realize that maybe it is a good practice to not use both bind:value and on:change at the same time.

Description

Prevent the usage of bind:value and on:change on the same input elem.

Examples

<script>
</script>

<!-- ✓ GOOD -->
<input bind:value={value} />
<input value={value} on:change={(ev) => {  value = ev.target.value }/>

<!-- ✗ BAD -->
<input bind:value={value} on:change={(ev) => { value = ev.target.value } />

Additional comments

No response

[marekdedic]

Random thoughts:

• Maybe the rule should only apply when the same variable is bound and at the same time is referenced in the event handler?
• Maybe other events should be reported as well? Maybe all events?

But this brings me to the real question: What exactly is the problematic mechanism here? Why are bound variables problematic in events? This will, imo, reveal what exactly should be checked and reported.