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

@ -177,7 +177,14 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
return h(
name,
{ ...restOfProps, ref: elementRef },
(isOpen.value || restOfProps.keepContentsMounted) ? renderChildren() : undefined
/**
* When binding keepContentsMounted as an attribute
* i.e. <ion-modal keep-contents-mounted></ion-modal>
* the value of the prop will be the empty string which is
* why we still call renderChildren() in that case.
*/
(isOpen.value || restOfProps.keepContentsMounted || restOfProps.keepContentsMounted === '') ? renderChildren() : undefined
)
}
});