feat: Auto scroll to selected item in ion-select

[MBuchalik]

Feature Request

Ionic version:

[x] 4.8.0

Describe the Feature Request

When a select menu (ion-select) contains many options so that it is scrollable, it is always scrolled to the top when the user opens it. If an option was already selected before opening it, the menu should start at this point.

You can see the following behavior on the Ionic Docs.

I have selected "September" here:

Now, when opening the menu, the user doesn't see the selected item

Until he scrolls down:

Describe Preferred Solution

When opening a select menu, it should automatically scroll to the currently selected option. Not scrolling to this option might lead to confusion among the users: It is not clear if something was already selected and which item it was.

Please note that the behavior I observed applies not only to the "alert" select menu, but also to all other possible menu types, such as the popover.

Describe Alternatives

To be honest, I don't really know any alternatives to my suggestion.

Related Code

See the Ionic docs: https://ionicframework.com/docs/api/select

Additional Context

It was already reported a few years ago: in #8688 and #6356.

[indraraj26]

This should tag to bug instead of feature request. This is not user friendly for user it should fix immediately.

[MBuchalik]

@indraraj26 I wasn't sure if this should be considered a feature request or bug report. You can indeed consider this an "UX bug", similar to how it was called in the discussion in #6356, since it is something that everyone expects from a select menu. (As it is something really basic... Everyone interacts with select menus every day and they all behave in the same way.)

@liamdebeasi Should we label this as a bug instead?

[anelad]

@MBuchalik You say

You can indeed consider this an "UX bug"

Since Ionic is a UI framework, yes this is nothing but a bug.

[Rehan1579]

Still facing the issue in Ionic 5.x Any update ?

[ankitasingh-12]

Is it fix? if yes in which version.

[davidgeary]

For anybody using Angular, I've created a workaround based on a hack I saw for this for a previous version of Ionic. It's an attribute directive targeting ionSelects that finds the selected option and scrolls it into view.

It works for all three of the ionSelect interfaces and just referencing it in your app's module should apply it to all ionSelects, without needing to update your templates (so when this is fixed properly in Ionic ;-), it'll be easy to remove).

[Rehan1579]

@davidgeary can you prepare a live example for it, it would be very helpful for all of us who face such issue.

[davidgeary]

@Rehan1579 There's not really much to show. It's an attribute directive, so you just need to add it to the declarations array of your AppModule (or any other relevant module in your app) and it should then be automatically applied to any ion-select in your component templates without any other changes.

[JorisDebonnet]

For what it's worth, I also created a directive that enables this much desired functionality. See on StackOverflow here.

[pankajjain15]

@JorisDebonnet I have implemented you solution but it shows scrolling to selected item . How to avoid that. I mean for e.g. if you have drop down of year 1900 to 2100 and selected value is 2021 . When I click on drop down , it opens up with 1900 and then suddenly it shows 2021. What it needs to show 2021 directly ? Kindly reply.

[JorisDebonnet]

When I click on drop down , it opens up with 1900 and then suddenly it shows 2021. What it needs to show 2021 directly ? Kindly reply.

I'm afraid it's not possible to immediately show the selected option (until this issue is resolved, inside the Ionic core). For now, we can only create workarounds by jumping to the selected option immediately after the dialog is opened.

[pankajjain15]

Thank you so much @JorisDebonnet . Really appreciate you quick reply.

[twilson-isi]

Jumping in to say that my client is perceiving this issue as a bug in their user testing, and I agree. This is a UX issue that still needs to be resolved in the core library.

[twilson-isi]

For posterity, I was able to solve this by using the following code (works if you're using the alert presentation for ion-select):

window.addEventListener('ion-alert-will-present', () => {
    let selectedOption = null
    const options = document.getElementsByClassName('alert-radio-button')
    if(options.length) {
        for(const option of options) {
          const attribute = option.attributes.getNamedItem('aria-checked')
          if(attribute && attribute.value === 'true') {
            selectedOption = option
            break
          }
        }
    }
    if(selectedOption) {
        setTimeout(() => {
          selectedOption.scrollIntoView({ block: 'center' })
        }, 0)
    }
}

[shonsirsha]

I feel like this is a basic yet very crucial feature. Any plans on the development of this feature yet?

At the moment, I'm using a hackish solution, similar to the above. However, it scrolls a little bit late (like 1 sec delay) and thus feels a little buggy.

Anyone able to achieve this auto scrolling without noticable delay?

[dkern]

This bug is still present after nearly 4 years. The selects are currently not really useful for longer lists because of this.

[Marius-Romanus]

Could version 8 be a good time for them to add that feature? 👀🤔