fix(vue): respect keepContentsMounted if passed as attribute (#28167)

Issue number: resolves #28165

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The overlay implementation in Vue only checks for truthy
`keepContentsMounted` values. When setting this prop as an attribute,
the value of it is `''` which is falsy. As a result, content does not
get mounted.

One of Vue's ESLint rules states that this should be supported:
https://eslint.vuejs.org/rules/prefer-true-attribute-shorthand.html

Part of the issue may also be that Vue does not know the type of this
property and so it assume "any":

> The shorthand form is not always equivalent! If a prop accepts
multiple types, but Boolean is not the first one, a shorthand prop won't
pass true.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- The overlay wrapper now checks for `''` values. If
`keepContentsMounted === ''` then the inner contents will be mounted
because this means the prop is being set using the attribute shorthand.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.3.5-dev.11694621267.1e5f63c2`
This commit is contained in:
Liam DeBeasi
2023-09-14 14:10:11 -04:00
committed by GitHub
parent a5f14e3933
commit 9050a9fbf5
3 changed files with 36 additions and 1 deletions

View File

@ -14,6 +14,10 @@
<ion-button id="open-auto-mount-popover">Open Auto Mount Popover</ion-button>
<ion-button id="open-auto-mount-modal-attribute">Open Auto Mount Modal (Attribute)</ion-button>
<ion-button id="open-auto-mount-modal-attribute-false">Open Auto Mount Modal (Attribute False)</ion-button>
<br /><br />
<ion-modal
@ -31,6 +35,22 @@
>
<PopoverContent :title="overlayProps.title"></PopoverContent>
</ion-popover>
<ion-modal
id="auto-mount-modal-attribute"
keep-contents-mounted
trigger="open-auto-mount-modal-attribute"
>
<ModalContent :title="overlayProps.title"></ModalContent>
</ion-modal>
<ion-modal
id="auto-mount-modal-attribute-false"
keep-contents-mounted="false"
trigger="open-auto-mount-modal-attribute-false"
>
<ModalContent :title="overlayProps.title"></ModalContent>
</ion-modal>
</ion-content>
</ion-page>
</template>

View File

@ -25,6 +25,14 @@ describe('overlays - keepContentsMounted', () => {
cy.get('ion-modal#auto-mount-modal ion-content').should('exist');
});
it('should mount content if passed as attribute', () => {
cy.get('ion-modal#auto-mount-modal-attribute ion-content').should('exist');
});
it('should not mount content if passed as attribute with a value of false', () => {
cy.get('ion-modal#auto-mount-modal-attribute-false ion-content').should('not.exist');
});
})
describe('popover', () => {
it('should not mount component if false', () => {