Used virtualized scrolling for AutoComplete component

[noisecapella]

What are the relevant tickets?

Fixes #515

What's this PR do?

Adds Menu and List from material-ui and modifies them and AutoComplete to increase performance and use virtualized scrolling.

Where should the reviewer start?

How should this be manually tested?

In general things should act exactly as they did before, except faster hopefully or at least not slower. Open up micromasters-ci in a separate tab and for each case compare functionality between it and your local instance which is on this branch.

First, go through all of the cases in the manual testing section of #382 and verify that it all works. Additionally check these cases (make sure to confirm the redux state for each selection):

• You should be able to press down to select the first item in the menu. If you press enter you should select that item in the list.
• Type text to filter the results, then press down and select some other item in the list. If you press enter you should select that item in the list.
• Type text to filter the results, press down, then click an item on the list. It should be selected successfully.
• Type text then press enter. The first item in the results should be selected.

Other things to check for:

• scrollbars should show up if and only if appropriate. You should be able to use them like any other list.
• When you click on a autocomplete field with many items, like the country field, it should open about as quickly as any other autocomplete field on the page. It should not be slower than it was before.
• You should be able to scroll to the bottom of the list and select the last item without any problem.
• The popup height should be at most 300 pixels, and if less space is needed it should shrink to fit the items in the list.
• The width should match the text field's width.

Bugs:

• if you press the page down key a few times and then press down, it will continue scrolling. This is different from the previous behavior where the down key would move to the next selected item in the list, no matter how far down in the list you go.

What GIF best describes this PR or how it makes you feel?

http://i.giphy.com/zf3skxc4BFBqo.gif

[gsidebo]

seems odd that menuHeight wouldn't be part of menuStyle. is there a reason for this? either way, this should be moved up to be proximal to menuStyle and menuProps in this list

[noisecapella]

I added menuHeight because we need to pass this number to the VirtualScroll component

[gsidebo]

that's a concern of the child component. i still think height should be part of menuStyle (as 'maxHeight'). Menu.js can worry about passing the correct value for 'menuHeight'. this would get rid of the need for 'menuStyleWithHeight', which IMO is kind of clunky

[noisecapella]

I'll add it back to menuStyle but we still need to pass it as a separate prop since maxHeight is not the same thing as VirtualScroll's height, and it seems clunky to extract that information from a CSS style object

[gsidebo]

just checked out the branch and ran through the profile forms. this is performing really nicely. should we think about manually testing this in other browsers?

[noisecapella]

Yes, we generally support the same browsers as edX: http://edx.readthedocs.io/projects/edx-guide-for-students/en/latest/front_matter/browsers.html

[gsidebo]

trying to test in an Win7/IE11 VM. happening on -ci too. ill file an issue for this. as it stands, i can't test this in IE11, soooo

👍

[noisecapella]

I filed an issue to fix this: #609

[gsidebo]

hold on a sec - jumped the gun on the +1. i just want to review the changes you made once more

[noisecapella]

That's fine, we have the merge freeze anyway

[gsidebo]

works in IE11

EDIT: that might not be true since the polyfill hasnt been added to this PR. i may have been working with the wrong static assets

[noisecapella]

I rebased on master so this PR should now include the polyfill

[noisecapella]

Any other comments?

[gsidebo]

tested in IE11. looks great! 👍