ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.05k stars 13.51k forks source link

feat: Auto scroll to selected item in ion-select #19296

Open MBuchalik opened 5 years ago

MBuchalik commented 5 years ago

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:

Screenshot_2019-09-07 ion-select - Ionic Documentation

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

Screenshot_2019-09-07 ion-select - Ionic Documentation(1)

Until he scrolls down: Screenshot_2019-09-07 ion-select - Ionic Documentation(2)

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 commented 5 years ago

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

MBuchalik commented 5 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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

ankitasingh-12 commented 4 years ago

Is it fix? if yes in which version.

davidgeary commented 3 years ago

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 commented 3 years ago

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

davidgeary commented 3 years ago

@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 commented 3 years ago

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

pankajjain15 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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

twilson-isi commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 1 year ago

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

Marius-Romanus commented 7 months ago

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