Very weird display bug when touching buttons in Ionic

[hudi]

This bug is really hard to explain or reproduce, so I’ll try to do my best to explain it.

Sometimes, when switching in a segment, the button does NOT switch.
When it does not switch, the display is broken (it seems to stay in a intermediary state: in Android, the button is grey, instead of blue for selected, or white for unselected. in iOS, it stays white.).
The business logic is broken too. Let’s see both working and not working examples:

Initial State:

Here is the initial page, with the “25€” button selected by default:

Working example:

When touching the “50€” button, the button switches, the amounts below are updated:

NOT working example:

Here is an example with Android: when touching the “50€” button, the button does not really switch (grey color), and the amounts below are not updated:

Solving attempts:

• I thought the bug was related to a problem with the segment component, since I read lots of similar issues about it. I decided to use 4 simple buttons instead of a segment, reproducing the segment behaviour manually. But I had exactly the same problem in the end! (examples above are with classic buttons, not segments).

Some information that could help understand:

• The bug occurs sometimes. To be more specific, let’s say the page that can bug is B, and two other pages that can lead to B are A1 and A2. It never bugs when coming from A1 to B and bugs sometimes when coming from A2 to B.
  And when making it work once using A1 page, it never bugs then. So, using A1 page first is a way to “solve” the bug.

• The bug occurs no matter the device (desktop, smartphone) and no matter the os (android or iOS)

• I suppose (but I could be wrong) that the problem does not come directly from a mistake in my code.

• Some actions (like rotating my phone from portrait to landscape, or clicking another button which opens popup) temporarily solve the bug (it “finished” the last switching action, but if I switch again, clicking another button, it still won’t work).

• Here is my ionic info:
  @ionic/cli-utils : 1.9.2
  ionic (Ionic CLI) : 3.9.2
  @ionic/app-scripts : 2.1.4
  Ionic Framework : ionic-angular 3.6.1
  Node : v8.3.0
  npm : 5.3.0
  OS : macOS Sierra

• I had the exact same bug with an older version of Ionic (may 2017).

Feel free to ask any additional information that could help solve one of the weirdest problem I have ever had.
Thanks a lot.

[rapropos]

@hudi

sometimes

Whenever I see this word, my first instinct is “race condition”. Carefully audit all of your asynchronous code for any potential places where you may be relying on the resolution of a future outside of a then or subscribe block.

[hudi]

Thanks for the clue.
Here is the onSubmit() method which is called on page A, that makes a redirection to B (the page with the display bug):
The bug is definitely related to this method because when I replace the createToken() stripe call with nothing but the redirection to page B, I have no bug on the page B.

EDIT
I notices something interesting:

Reducing the method to this still does not work (creates the bug on the redirected page):

  onSubmit() {
    // Reset all errors
    this.resetHugoErrors();
    this.stripeError = null;

    const loading = this.loadingCtrl.create({content: msg.PROGRESS_CARD_RECORDING});
    loading.present();

    let stripeCard: StripeCard = AddCardPage.hularCardToStripeCard({
      number: this.cardForm.value.cardNumber,
      expDate: this.cardForm.value.expDate,
      cvc: this.cardForm.value.cvv
    });
    
    // 1 - Call stripe.js first to get a secured token which will replace card number
    Stripe.card.createToken(
      stripeCard,
      (status: number, response: any) => {
        loading.dismiss();
        if (status === 200) {
          this.navCtrl.setRoot(this.pageAfterCardAdded, {card: {}});
        } else {
          console.log("not cool");
        }
      }
    )

  }

However, when calling the redirection directly, no problem.