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

[SpaceTimee]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

ion-button inherits styles from ancestor elements when in a keep-contents-mounted ion-modal, but does not inherit when the keep-contents-mounted property set false

Expected Behavior

Same inheritance behaviour & style in both keep-contents-mounted & not keep-contents-mounted ion-modal

Steps to Reproduce

Normal button is solid but Kept button is transparent and set in-toolbar in-buttons button-clear class:

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons>

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

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

          <ion-button id="kept-ion-modal-trigger">Kept</ion-button>

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

        </ion-buttons>
      </ion-toolbar>
    </ion-header>
  </ion-page>
</template>

Code Reproduction URL

https://github.com/SpaceTimee/test

Ionic Info

Ionic:

Ionic CLI : 7.2.0
Ionic Framework : @ionic/vue 7.7.4

Capacitor:

Capacitor CLI : 5.7.2
@capacitor/android : not installed
@capacitor/core : 5.7.2
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : not installed globally

System:

NodeJS : v20.7.0
npm : 10.2.4
OS : Windows 10 (Windows 11 actually)

Additional Information

No response

[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?

[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>

[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.

[ionitron-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.