mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-14 16:52:26 +08:00
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:
@ -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>
|
||||
|
@ -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', () => {
|
||||
|
Reference in New Issue
Block a user