bring rich dropdown elements into focus when opening

[ajb]

cf #248

@jrubenoff, I could use your opinion here. (Once you're back!)

Here's a screencast: http://take.ms/hpwPH

[jrubenoff]

What if we just positioned the dropdown menu above the button in these instances, instead of below it?

This would more closely replicate the behavior of existing selects, and remove the abrupt / awkward shift in page position that this approach requires.

[ajb]

That would be about 100x more complicated to implement. If this is an improvement, we should merge it -- if not, I don't really have any other options. (I worked at this for a while...)

[jrubenoff]

Well, just looked at the original issue, which clarifies things a bit!

So...

• Like #248 depicts, is there any way we can scroll the selected item as close to the top of the list as possible? As it stands, the scrolling behavior seems a little arbitrary.

• Re: the bottom-of-viewport stuff, what I suggested above is how iOS does it. You can see another manifestation of the same problem in #129. Right now, it looks like it's a "won't fix" Bootstrap issue (see this, and fat's comment that this might be a perf problem.)

  We should keep thinking about ways to solve this in the future, beyond this issue... it's still pretty annoying for responsive design, and for smaller screens.

• In the meantime, would it be too expensive to (rapidly) smooth-scroll the window if the dropdown's at the bottom of the viewport? As mentioned, right now it feels a little abrupt.

[ajb]

Please look at the implementation. There is no flexibility on how it behaves.

[jrubenoff]

Couldn't you..

• set the $.scrolltop of .dropdown to li.active a
• animate the scroll position
• then focus it?

[ajb]

I tried that, but I was having trouble figuring out how to get the correct offset of li.active a. Also, there's no guarantee where it will be positioned once it's .focus()ed.

If you'd like to pair on this, we can try, but I spent a while trying to make this work.

[ajb]

In person: we went over my comment above ^^.