🐞 Describe the Bug
When using the {{on}} modifier on an input the callback is fired before the bound value is updated.
From the documentation
<Input @id="input-name" @value={{this.name}} {{on "input" this.validateName}} />
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:
<Input @id="input-name" @value={{this.name}} @input={{this.validateName}} />
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 <Input @value={{this.name}} {{on "input" this.validateName}} /> 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 <Input @value={{this.name}} @input={{this.validateName}} /> 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 <Input @value={{this.name}} {{on "input" this.validateName}} /> 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
🐞 Describe the Bug
When using the {{on}} modifier on an input the callback is fired before the bound value is updated.
From the documentation
<Input @id="input-name" @value={{this.name}} {{on "input" this.validateName}} />In
validateNameI would assume I can validate the name by usingthis.namebut it doesn't have the correct value at this time.This differ from the "old" way of using an argument for the event:
<Input @id="input-name" @value={{this.name}} @input={{this.validateName}} />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
<Input @value={{this.name}} {{on "input" this.validateName}} />and I type "John Doe" in this input field,by the time
this.validateNameis calledthis.namewill have the value "John Do".Using the "old" way
<Input @value={{this.name}} @input={{this.validateName}} />this.namewill 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
<Input @value={{this.name}} {{on "input" this.validateName}} />and I type "John Doe" in this input field.by the time
this.validateNameis called I expectthis.nameto have the value "John Doe".🌍 Environment