fix(select): popover can be scrolled

[liamdebeasi]

Issue number: resolves #28963

---

What is the current behavior?

In #28861 I fixed an issue that caused the wrong content inside of a popover to be scrollable. This CSS should have been applied, but it broke back when popover was converted to the Shadow DOM. Fixing this issue revealed a misconfiguration with the select-popover that caused the select-popover to no longer be scrollable.

What is the new behavior?

• Content inside of ion-select-popover can now be scrolled

Note that I am considering this a bug fix instead of a regression. While scrolling used to work in select-popover, it only worked by chance. The .popover-viewport styles should have always applied to the select-popover, thus requiring the use of overflow-y: auto in select-popover.

Does this introduce a breaking change?

• Yes
• No

Other information

Dev build: 7.7.1-dev.11706893059.1bef4b38

[thetaPC]

LGTM, works as intended

[tgangso]

FYI. This did not resolve the issue for me when using a component in the popover. Example:

this.popover.create({
component: XPopoverComponent,

But it works when I add the following CSS to the XPopoverComponent CSS file.

:host {
overflow-y: auto;
}

[capc0]

@liamdebeasi I can confirm @tgangso issue with version 7.7.5

A workaround is to set the following in a global style set:

ion-popover>* { overflow-y: auto; }

Should I open another issue?

[thetaPC]

Thank you for bringing this to our attention!

Yes, please open a new issue with a minimal repro so we can investigate this.

[capc0]

Thank you for bringing this to our attention!

Yes, please open a new issue with a minimal repro so we can investigate this.

fyi I have created the following issue to track this: #29211