Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Apr 29, 2024

Conversation

sean-perkins
Copy link
Contributor

@sean-perkins sean-perkins commented Apr 26, 2024

Issue number: resolves #29321


What is the current behavior?

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?

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

Does this introduce a breaking change?

  • Yes
  • No

Other information

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

Copy link

vercel bot commented Apr 26, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
ionic-framework ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 26, 2024 9:03pm

@@ -2,7 +2,11 @@
@import "./select-popover.md.vars";

ion-list ion-radio::part(container) {
opacity: 0;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I could not find a compelling reason for the use of opacity: 0 here.

The changes comes from: #23474 and I believe is targeted around this issue: #12310 (the PR closes 3 issues).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like this fixes another issue we never caught where the label text did not extend the full width of the row (because the radio container was still taking up space)

Before After
Screenshot 2024-04-29 at 10 16 16 AM Screenshot 2024-04-29 at 10 16 21 AM

@sean-perkins sean-perkins marked this pull request as ready for review April 26, 2024 21:22
@sean-perkins sean-perkins requested a review from a team as a code owner April 26, 2024 21:22
@liamdebeasi
Copy link
Contributor

Tested it out, and it works well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug: fill outline select with fit-content will hide select options
2 participants