Ionic-framework: [RC.0] ion-button in toolbar: still appears as disabled until hovered after enabling

[simonhaenisch]

Bug Report

Ionic version:

[x] 4.x

Current behavior:

An ion-button within a header toolbar is initially rendered as disabled. When removing the disabled attribute from that button (e. g. by clicking another button), the button still appears disabled, until it is hovered.

Expected behavior:

The button should immediately appear enabled.

Steps to reproduce:

https://codepen.io/simonhaenisch/pen/ZVJWbb

Related code:

<ion-app>
  <ion-header>
    <ion-toolbar color="primary">
      <ion-title>Ionic 4 - RC.0</ion-title>
      <ion-buttons slot="end">
        <ion-button id="prev" disabled>
          <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
        </ion-button>
        <ion-button id="next">
          <ion-icon slot="icon-only" name="arrow-forward"></ion-icon>
        </ion-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>
</ion-app>

<script>
  const prevButton = document.querySelector('ion-button#prev');
  const nextButton = document.querySelector('ion-button#next');

  nextButton.addEventListener('click', () => {
    prevButton.disabled = false;
  });

  prevButton.addEventListener('click', () => {
    prevButton.disabled = true;
  });
</script>

Other information:

It doesn't happen if the buttons are just in the ion-content.

Edit: also doesn't happen in iOS mode (it's enough to put mode="ios" on the back button).

Ionic info:

Ionic:

   ionic (Ionic CLI) : 4.6.0

System:

   NodeJS : v8.14.1
   npm    : 6.5.0
   OS     : macOS Mojave

[manucorporat]

Looks like a bug of chrome, i can't reproduce in Safari.
Wondering if we can find a workaround

[ionitron-bot[bot]]

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.