Ionic 4 - ion-select does not scroll to selected item in alert

Question

I'm using ionic 4.7.0.

The problem I'm reporting happens on Chrome and Firefox.

Actual Behaviour:

Using ion-select with a big list of options, when you open the alert, ion-select does not automatically scroll to the selected value. The user sees the first value in the list of options and he might think that nothing is selected

Expected Behaviour:

When the alert is open, the view automatically center on the selected value

I created this stackblitz to highlight the behaviour, we can see on the stackblitz that on loading the view, the selected value is 11:00 but when you open the alert (by clicking on ion-select), I would expect the view to be automatically scrolled on the selected value.

Is that expected behaviour with ion-select?

I found a few questions talking about the same subject but nothing that really answers the question:

Ion-select doesn't scroll in Ionic 3: This one gives a solution with CSS that can't work with ionic 4 because ionic 4 uses web Components that are not modifiable
ion-select not showing selected option with FormBuilder (Ionic 3): Same as above
https://github.com/ionic-team/ionic-v3/issues/1005: Some scroll bug with ion-select that is suppose to be fixed with ionic 3.9.5, so I guess it's not the same problem

Thomas · Accepted Answer · 2020-01-28T16:33:27.517

This is currently not a feature in Ionic but there is an open issue. Give it a thumbs up to increase its priority.

For the moment you can use a workaround:

window.addEventListener('ionAlertDidPresent', e => {
  const selected = (e.target as HTMLElement).querySelector('[aria-checked="true"]');
  selected && selected.scrollIntoView();
});

This listener will fire each time an alert is preseted. It then looks for the (first) selected element using the aria-checked HTML attribute and scrolls it into view.

You might want to take a look at the parameters for scrollIntoView(), e.g. to scroll so the selected item is at the bottom.

To only affect the ion-select alerts you can check if the alert has the select-alert (or single-select-alert) class. To only affect a single alert you can give the alert an ID by passing it in the interfaceOptions property of ion-select.

As mentioned, this is a workaround and might stop working if the component changes.

OMG, I should have found the github issue/feature request/bug. I did not want to believe that this was not working by default, I really thought I was doing something wrong. — Tonio, Jan 28 '20 at 16:13

score 2 · Answer 2 · answered Jan 02 '21 at 19:21

I recently rewrote our autoscroll directive, so I thought I'd share it here. It works for all IonSelect interfaces (Alert, Popover and ActionSheet).

import { Directive, HostListener } from '@angular/core';
import { IonSelect } from '@ionic/angular';

/**
 * Autoscroll to the selected option of an ion-select when opened.
 */
@Directive({
  selector: 'ion-select[autoscroll]'
})
export class AutoscrollSelectDirective {

  constructor(
    private ionSelect: IonSelect
  ) {}

  @HostListener('click')
  scrollSoon(): void {
    let keBab = '';
    switch (this.ionSelect.interface) {
      case 'alert': keBab = 'Alert'; break;
      case 'action-sheet': keBab = 'ActionSheet'; break;
      case 'popover': keBab = 'Popover'; break;
    }

    if (keBab) {
      window.addEventListener(
        `ion${keBab}DidPresent`,
        e => {
          const parent: Element = <any>e.target;
          const scrollTarget = keBab === 'ActionSheet'
              ? parent.querySelector('.action-sheet-selected')
              : parent.querySelector('[aria-checked=true]')?.closest('.select-interface-option');
          if (scrollTarget) {
            scrollTarget.scrollIntoView();
          }
        },
        {once: true}
      );
    }
  }

}

Ionic 4 - ion-select does not scroll to selected item in alert

2 Answers2