bug: ion-button inherits styles from ancestor elements when in a keep-contents-mounted ion-modal about ionic-framework

[liamdebeasi]

Thanks for the report. Buttons take on additional styles when they are used inside of a toolbar. When keep-contents-mounted is set, the button is rendered inside of a toolbar (even if it's not a child of the toolbar). The button should have an in-toolbar class which applies the special styles.

When keep-contents-mounted is not set, the button is not rendered until the modal is moved to the root of the application. As a result, the button is never rendered inside of the toolbar.

The class is not re-evaluated every time the button moves around in the DOM as that would introduce a performance overhead.

Can you try moving the modal outside of the toolbar and let me know if that resolves the issue?

[liamdebeasi]

As long as the modal is outside of the toolbar that should be enough to avoid this behavior. You can keep the modal inside of ion-page if you'd like. The modal has display: none when closed so it should not impact layout.

[SpaceTimee]

Yes, both buttons are rendered normally when moving the modals outside of the toolbar

Is it advised to put modals outside the ion-page like this?

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons>
          <ion-button id="normal-ion-modal-trigger">Normal</ion-button>
          <ion-button id="kept-ion-modal-trigger">Kept</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
  </ion-page>

  <ion-modal trigger="normal-ion-modal-trigger">
    <ion-button>Normal</ion-button>
  </ion-modal>

  <ion-modal trigger="kept-ion-modal-trigger" keep-contents-mounted>
    <ion-button>Kept</ion-button>
  </ion-modal>
</template>