moose4lord · GitHub

Prerequisites

Ionic Framework Version

v7.x

Current Behavior

When an IonSelect is presented with a long list of options and interface is set to "popover", then only a partial list of the options is shown with no scroll bar. If interface is set to "alert" or "action-sheet", the scroll bar is shown and the component works properly.

Expected Behavior

When interface="popover" and the list of select options is long, a scroll bar should be visible.

Steps to Reproduce

Just create an IonSelect with interface="popover" and lots of options.

  <ion-select label="Fruits" placeholder="Select fruit" interface="popover">
    <ion-select-option value="apples">Apples</ion-select-option>
    <ion-select-option value="oranges">Oranges</ion-select-option>
    <ion-select-option value="bananas">Bananas</ion-select-option>
    <ion-select-option value="bananas3">Bananas3</ion-select-option>
    <ion-select-option value="bananas4">Bananas4</ion-select-option>
    <ion-select-option value="bananas5">Bananas5</ion-select-option>
    <ion-select-option value="bananas6">Bananas6</ion-select-option>
    <ion-select-option value="bananas7">Bananas7</ion-select-option>
    <ion-select-option value="bananas8">Bananas8</ion-select-option>
    <ion-select-option value="bananas9">Bananas9</ion-select-option>
    <ion-select-option value="bananas10">Banana10</ion-select-option>
    <ion-select-option value="bananas11">Bananas11</ion-select-option>
    <ion-select-option value="bananas12">Bananas12</ion-select-option>
    <ion-select-option value="bananas13">Bananas13</ion-select-option>
    <ion-select-option value="bananas14">Bananas14</ion-select-option>
    <ion-select-option value="bananas15">Bananas15</ion-select-option>
    <ion-select-option value="bananas16">Bananas16</ion-select-option>
    <ion-select-option value="bananas17">Bananas17</ion-select-option>
    <ion-select-option value="bananas18">Bananas18</ion-select-option>
    <ion-select-option value="bananas19">Bananas19</ion-select-option>
    <ion-select-option value="bananas20">Bananas20</ion-select-option>
  </ion-select>

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 7.6.6
@angular-devkit/build-angular : 17.1.1
@angular-devkit/schematics : 17.1.1
@angular/cli : 17.1.1
@ionic/angular-toolkit : 9.0.0

Capacitor:

Capacitor CLI : 5.6.0
@capacitor/android : 5.6.0
@capacitor/core : 5.6.0
@capacitor/ios : 5.6.0

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v20.11.0 (/usr/local/bin/node)
npm : 10.2.4
OS : macOS Unknown

Additional Information

No response

Read the original on github.com ↗