[Select] First implementation

[oliviertassinari]

A big thanks to @kybarg 🎉

• Native version
• Menu version
• Accessibility
• Finalize the API
• Flow
• Documentation
• Edge cases
• Unit tests
• TypeScript

---

• Closes [SelectField] Port SelectField component to v1 #7632 as a continuation
• Closes Error using SelectField #7548 as a migration, not sure what's going on
• Closes [SelectField] The prop "labelStyle" in Select Field doesn't work in Chrome #7419 as we have a new style override story
• Closes [SelectField] Not taking viewport bounds into consideration appropriately #7076 as Menu is working as expected
• Closes [SelectField] onBlur not fired when tapping on the input #7018 as it's working now
• Closes Can't get "TouchTap event targeting the menu item that was selected" when use SelectField with multiple={false} #6968 as our event handling is straightforward
• Closes [SelectField] [MenuItem] are toggled on right click #6937 as it's the same with a native select
• Closes [SelectField] hintText not showing up #6814 as we rely on composition
• Closes [SelectField] Keyboard Focus reset on re-render #6761 hopefully the Menu handle the logic correctly
• Closes [SelectField] broken with position: sticky parent #6712 as we freeze the scroll and add a backdrop
• Closes SelectField alignment issue with TextFields (#2601) #6470 as we have added a visual regression test for it
• Closes [SelectField] Unable to style selectField/dropDownMenu icon in custom theme #6427 as we have a new style override story
• Closes When clicking the chevron icon in the SelectField, the currently selected dropdown option is not colored. #6484 as we have removed this strange feature
• Closes [SelectField] How to override the icon of the SelectField component? #6351 as it's not something is worth supporting (I don't get the use case)
• Closes [SelectField] Does not support readOnly property #6342 as the readOnly is not supported on a native select, still we implmemented it for the menu version
• Closes [SelectField] Browser address autofill does not work when used for the state field  #6324 as we are backed by a native input, that we listen to
• Closes Screen flicker in iOS on select field item selection  #6206 as we have fixed the iOS backdrop style issue
• Closes [SelectField] Focus reset after using keyboard to make selection #6080 hopefully, the Menu focus logic is correct
• Closes [SelectField] Object as value fails equality check #5818 we don't support object value as they can't be serialized into an input (bad for SSR among other things)
• Closes [SelectField] shows incorrect opening animation #5764 hopefully, the Menu opening logic is good
• Closes [SelectField] Port component #5716 as the migration is completed
• Closes [SelectField] Overflowing text of selected item breaks into multiple lines - reopen please #5615 as we have been taking care of it with some custom CSS
• Closes [SelectField] underlineFocusStyle not getting applied #5470 as we have a new style override story
• Closes [SelectField] can appear without any selection when clicking near the arrow #5260 as all the zone is interactive
• Closes [SelectField] the dropdown width is exceeding its container width #5199 as we fit the item sizes, not the container, it's up to users to change it.
• Closes [SelectField] onChange fired multiple times on Android Chrome #5183 hope that relying on click events address it
• Closes [SelectField] horizontal scrollbar when width is set to 100% #5092 strange issue, we don't do anything tricky with the width, should be good.
• Closes [SelectField] currentTarget no longer works #5085 as we use normal event browser capabilities
• Closes [SelectField] autoWidth ignored #5073 as we have removed the autoWidth feature
• Closes [SelectField] shows an empty selection after immediate click after picking one of the menuitems #5066 as we support the reset value use case
• Closes [SelectField] Not mobile friendly - utilize browser Select capabilities #4927 as it can be enabled with the native property
• Closes [SelectField] Is it possible to add className to the dropdown container #4919 as we have a new style override story
• Closes [SelectField] DropDownMenu width #4858 as we have an example in the demos
• Closes [SelectField] label is influenced by text-align css property #4847 as we rely on composition
• Closes [SelectField] menu is not shown when pressed/touched in Firefox for mobile #4831 as we rely on click events now
• Closes [SelectField] Not accepting null in array  #4825 as the return null feature has been added some time ago in the Menu
• Closes [SelectField] Can not focus programmably #4709 as user have access with the ref to the dom select
• Closes [SelectField] selected item color is pink while styles are set to other color #4481 as we have a new style override story
• Closes [SelectField] floatingLabelFixed #4335 as we rely on composition with other input elements
• Closes Select field in Dialog, menu not stay with field when scrolling. #4309 as we freeze the scroll
• Closes [SelectField] Invalid height when has floatingLabelText and empty value #4297 as we rely on composition with other input elements
• Closes [SelectField] floatingLabelText overlap with falsy value selected #4275 as the logic seems correct now
• Closes [SelectField] Sending value to the server #4271 as we are backed by native inputs (input hidden or select)
• Closes [SelectField] onFocus and onBlur not being called #3151 as the hook are called
• Closes [SelectField][Dropdown Menu] Menu with many items performance much worse with popovers #2787 we don't support virtualize and won't in the future, it's a select component, I don't think that it's a use case to render many many items.
• Closes [SelectField] Support for autoWidth #2480 as the feature request has low support and I think that it's simple enough to be provided by users
• Closes [SelectField] label bug #2446 as I couldn't reproduce

Also closes DropDownMenu issues as was used in the same context than the SelectField on the v0.x versions:

• Closes [DropDownMenu] Doesn't support "popoverProps" like AutoComplete #7773 as user can provide property to the Menu component MenuProps
• Closes [DropDownMenu] Unknown props from the documentation #7160 as the documentation is better now
• Closes [DropdownMenu] / [IconButton] accessibility: missing aria-label, aria-labeledby #6906 as accessibility is correctly supported
• Closes DropDownMenu alignment issues in ToolBar #5961 as it's no longer relevant
• Closes [DropDownMenu] Vertical alignment breaks between 16.4 and 16.6 #5839 as the select fit well with the other input elements
• Closes DropDownMenu autoWidth not working #5812 as the autowidth feature was removed
• Closes [DropDownMenu] not sending menu item value #5708 as we have a 100% test coverage on the callbacks
• Closes Select dropdown on docs site doesn't work in mobile browsers #3617 as I have been trying the component mobile, no issues
• Closes [DropDownMenu] TabIndex, Close on ESC, Emitting button label #3558 as the Menu handles the ESC key and his normalized with the IconButton
• Closes DropDownMenu MenuStyle not working in v 0.14.0 #3537 as we have a new style override story

---

• PR has tests / docs demo, and is linted.
• Commit and PR titles begin with [ComponentName], and are in imperative form: "[Component] Fix leaky abstraction".
• Description explains the issue / use-case resolved, and auto-closes the related issue(s) (http://tr.im/vFqem).

[oliviertassinari]

@sebald I might not have the energy of going into the TypeScript coverage to begging with. I'm going to handle the unit tests now.

[sebald]

@oliviertassinari sure. Do you want the typings to be part of the PR or should we create them after this is merged?

[oliviertassinari]

@sebald I will try to write some, but I don't guarantee the outcome 😆 . So I would love to have you giving a second look.

[sebald]

Will do 😄

[oliviertassinari]

@sebald Well, the yarn test:typescript command is outputting some errors 😬 . I'm not good at it.

[oliviertassinari]

@kybarg Thanks a lot for your original migration. It was a great help for this implementation! I have been taking advantage of some of your logic and some of your unit tests.

[ctavan]

Wow, this is awesome and impressive! I feel that a 🎉 reaction on the PR comment is not enough to express my gratefulness 😄 !

[wieseljonas]

@oliviertassinari @kybarg thank you for the great work

[tfuqua]

@oliviertassinari @kybarg awesome!

[nareshbhatia]

@kybarg @oliviertassinari - you guys just made my day! Heartfelt Thank You.