fix(select): options are visible with fit-content width and fill outline (#29408)

Issue number: resolves #29321

---------

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

When using a select with `fill="outline"`, `interface="popover"` and a
width that fits the content of the options, the select options are not
visible. The hidden radio is covering the text of the radio text
options.

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

- Select options are visible and no longer covered by the hidden radio
container

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## 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: `8.0.2-dev.11714165638.13e7dd5b`

Reproduction (issue): https://stackblitz.com/edit/angular-mndtkr
Reproduction (with dev-build):
https://stackblitz.com/edit/angular-mndtkr-d7wsnp

Reproduction steps:
1. Open the select
2. Observe: The popover displays the options, but the options are not
visible/readable to the user
3. Use the dev-build
4. Open the select
5. Observe: The popover displays the options and they are
visible/readable to the user (5, 10, 15).
This commit is contained in:
Sean Perkins
2024-04-29 10:32:12 -04:00
committed by GitHub
parent fa85f030cf
commit f15b62a9ca
5 changed files with 38 additions and 1 deletions

View File

@ -2,7 +2,11 @@
@import "./select-popover.md.vars";
ion-list ion-radio::part(container) {
opacity: 0;
display: none;
}
ion-list ion-radio::part(label) {
@include margin(0);
}
ion-item {

View File

@ -237,4 +237,37 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
await expect(notchCutout).toBeHidden();
});
});
test(title('select: fill outline: fit-content should display select options'), async ({ page }, testInfo) => {
testInfo.annotations.push({
type: 'issue',
description: 'https://github.com/ionic-team/ionic-framework/issues/29321',
});
await page.setContent(
`
<ion-select
fill="outline"
aria-label="Fruit"
value="apple"
interface="popover"
style="width: fit-content"
>
<ion-select-option value="5">5</ion-select-option>
<ion-select-option value="10">10</ion-select-option>
<ion-select-option value="15">15</ion-select-option>
</ion-select>
`,
config
);
const select = page.locator('ion-select');
const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
await select.click();
await ionPopoverDidPresent.next();
const selectPopover = page.locator('ion-select-popover');
await expect(selectPopover).toHaveScreenshot(screenshot(`select-fill-outline-fit-content`));
});
});