emberjs / emberjs/ember.js

[Bug] {{on}} modifier on input fired before bound value is updated

Open
#19,222 11 comments 5 reactions 0 assignees View on GitHub
documentation
Dominant language
TypeScript
Stars
22.6k
Forks
4.2k
Avg merge
3d 12h
Merged PRs (30d)
15

Description

### 🐞 Describe the Bug

When using the {{on}} modifier on an input the callback is fired before the bound value is updated.
From the documentation
``

In `validateName` I would assume I can validate the name by using `this.name` but it doesn't have the correct value at this time.
This differ from the "old" way of using an argument for the event:
``

This might be indented but it wasn't clear for me, especially coming from using the "old" way.

### 🔬 Minimal Reproduction

https://ember-twiddle.com/89e1a8168304360b322981218ee218ff

### 😕 Actual Behavior
When using the {{on}} modifier the bound value isn't updated before the modifier callback is run, which differs from the "old" way using an event argument.
Example:
If I have `` and I type "John Doe" in this input field,
by the time `this.validateName` is called `this.name` will have the value "John Do".
Using the "old" way `` `this.name` will have the value "John Doe".

### 🤔 Expected Behavior
When using the bound value in the modifier callback I expect it to be the updated value. If this is intended maybe it should at least be clarified in the documentation?
Example:
If I have `` and I type "John Doe" in this input field.
by the time `this.validateName` is called I expect `this.name` to have the value "John Doe".

### 🌍 Environment

- Ember: 3.22
- Node.js/npm: node v12.19.0, npm 6.14.8
- OS: MacOS 10.15.7 (19H2)
- Browser: Safari Version 14.0 (15610.1.28.1.9, 15610), Chrome 86.0.4240.111, Firefox 82.0

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.