Understanding CSS styles applied to IonSelect

Ionic Framework Ionic React
1

I have an IonSelect with popover interface where long options are getting cut off. I don’t know how to solve the issue and I fail to understand how CSS styles are applied to this component.

I want the options popover to take the width of IonSelect or, at least, the width of the longest option.
A minimal example of my code is here.

After inspection, I have realized that an autogenerated style is applied to every popover in my code, whether they are inside an IonSelect component or independent.

imagen

There is a topic that mentions this same autogenerated style.
The issue with options getting cut off disappears if I uncheck that box besides -width: 250px; but I don’t know how to implement that uncheck in my code. How is this style autogenerated? Is it controllable somehow?

I have tried a few options to solve my issue but none is entirely satisfactory. The only ones that have had an effect are the ones that globally target ion-popover.

  1. Style that globally targets IonPopover and include --width

    1.1 This option gets all popovers in my code to take the full width of the page, which is not what I want

    • Page css:
      ion-popover { --width: var(--popover-width); }
    • Global.scss:
      :root { --popover-width: 100%; /* Set the default width to 100% */ }

    1.2 This options also gets all popovers to take the full width of the page

    • Page.css : ion-popover { --width: 100%; }
    • Global.scss: empty

    1.3 This options gets popovers to take the width of the longest option in CodeSandBox, except in case it needs to be scrolled (in a smaller scree) when it gets cut again. This is surprising for me because popover-width is never defined.

    • Page.css : ion-popover { --width: var(--popover-width); }
    • Global.scss: empty

  2. Using width without double hyphen (- -) has no effect.
    Replicating the same options in 1 without double-hyphen have no effect at all.

  3. Styles targeted at alert-wrapper and alert-radio-label have no effect.
    Using styles like the following is recommended in a few topics (1, 2, 3, 4) but had no effect for me.

  4. Styles targeted at popover-content have no effect
    Including this in CSS (.popover-content { min-width: 100%!important; }, ), either on page css or global.scss has no effect. It is mentioned in this topic.

  5. I have not managed to use shadow parts for style
    IonSelect and IonSelect options are shadow components, so they can be targeted with part. However none of CSS Shadow Parts defined for IonSelect are related to popover width. IonSelectOption has no available shadow parts. Ionic documentantion seems to suggest that custom part can be defined for shadow components, however part prop does not work for IonSelect, IonSelectOption or div.

2

IonPopover width can be set to auto in global.scss file so it can match content size. In case of IonSelect, it will match the width of the longest option.

global.scss:

ion-popover {
  --width: auto;
}

I had assumed auto width was the default because the previous explanation in IonPopover docs was not clear. It has been changed after this issue. The default size is actually based on Ionic variables, in this case it was 250px defined as popover-md-width.

This resolves my issue with IonSelect options getting cut off except in the case where there are many options and a scrollbar appears. A minimal example can be found here.

Any ideas about how to enforce IonPopover auto width when it includes a scrollbar?