If first item in menu is an option group then it is cut off when the menu opens

[mattics]

'.Select-menu. scrollTop is set to the offset of the "first" item - option group label is not considered as the first/focused item therefore '.Select-menu' is scrolled past the option group label meaning the user has to scroll back up to see the option group label.

Can be recreated with the docs option group example by removing "Black" option and having "Primary Colors" as the first option.

[TrevorBurnham]

Fixed by #19, which I've made part of the 1.0.0-beta13 release. Thanks for reporting!

[Mesoptier]

There is a problem with this fix. I have a long list of options in groups and because of this fix the dropdown will always scroll to the top of the focused option's group, instead of to the focused option.

This means that the focused option may not be visible, which I don't think is an acceptable solution.

[TrevorBurnham]

@Mesoptier makes a good point. Compare e.g. Select2, where the behavior is to scroll to the item above the selected option, which helps contextualize that option while ensuring that it's shown:

I'm going to adopt this behavior in the next release.

[sbauch]

Maybe this is an odd use case, but I am nesting some options groups deeper than one level. As a result, on focus, the component scrolls to the first option's immediate parent, which for me cuts off 4 group headings.

Not sure what a good solution is from a UX perspective, but I am leaning towards proposing that the component scrolls to the top level group heading instead of just the immediate parent.

Here's what the component looks like when I focus:

And the parent groups that are scrolled past:

[TrevorBurnham]

Hmm. One problem with scrolling to the root parent is this: Let's say that the option A is selected, and that the tree is:

Numbers
> 1
> 2
> 3
Characters
> Japanese Characters
> > ひ
> > ら
> > が
> Greek Characters
> > α
> > β
> > γ
> English Characters
> > A
> > B
> > C

The current behavior is to scroll to the item above the selected option. When option A is selected, we scroll to the name of its group, English Characters. If Option B is selected, we'd scroll to A, and you'd only have to scroll up a little further to see the group that contains them.

If we scrolled all the way up to the root group name, Characters, a user would have a very hard time finding the selected option in the hierarchy.

[sbauch]

okay yeah that all makes sense to me.

I actually think I'd prefer not to scroll to the selected option on focus, so what would you think of a boolean prop for scrollTo, default true that when false would disable the scroll to option functionality altogether?