Skip to content

bug: popover from select not scrollable #28963

@moose4lord

Description

@moose4lord

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions