question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: IonInput race condition with IonChange and IonBlur

See original GitHub issue

Bug Report

Ionic version: [ ] 4.x [x] 5.x

Current behavior: I found the bug when we were trying to support the Bitwarden autofill and coming up with an issue.
Basically we found the onBlur event would occur before the onChange.
This causes an issue because we tie the validation to the onBlur. So if the value is not updated before the onBlur event, it would do the validation on an empty input.

Expected behavior: onChange should trigger the value update or at-least make sure the value is updated, since there is a delay option, before onBlur gets called.

Steps to reproduce: Sample app below to test ion-input and native input.

I used Bitwarden to trigger the autofill

Selection_865

Selection_866

Related code: https://github.com/scottix/ionic-bitwarden

Other information:

Ionic info:

Ionic:

   Ionic CLI       : 6.13.1 (/usr/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 5.6.4

Capacitor:

   Capacitor CLI   : 2.4.7
   @capacitor/core : 2.4.7

Utility:

   cordova-res : 0.15.3
   native-run  : not installed

System:

   NodeJS : v12.22.1 (/usr/bin/node)
   npm    : 6.14.12
   OS     : Linux 5.4

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
czzplnmcommented, Apr 15, 2021

Should probably add this to your docs so other people can make sense of this weird behavior.

0reactions
ionitron-bot[bot]commented, May 15, 2021

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Read more comments on GitHub >

github_iconTop Results From Across the Web

angular - ionic:Change event is not fired on <ion-input> when ...
I am changing input value from one of external javascript file. $('.scoreboardus input').val(200).trigger('onchange');.
Read more >
@ionic/angular | Yarn - Package Manager
Bug Fixes. header: fix race condition in collapsible header (#20334 (215d55f); ios: translucent toolbar blur no longer obscures entering page toolbar ...
Read more >
How do I turn on the webview autocomplete for an login form ...
The corresponding WebKit bug report is this: ... I had the same issue, seems to work if you just keep the IonInput, and...
Read more >
https://raw.githubusercontent.com/moweex/ionic/mas...
Bug Fixes * **list:** remove margin of MD buttons in ion-item-options ... **navigation:** account for race conditions in developer's code ...
Read more >
EditorState Race Conditions - Draft.js
Different browser events can trigger the Editor to create a new state and call onChange . For instance, when the user pastes text...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found