Add missing browser default behavior for select component

[usolved]

I'd like to start a discussion about the select component to address some issues that we're facing. To have better styling options the standard html select element has been replaced with a own implementation of a drop down field in the element library. So we lost some browser default behavior that would be good to re-implement for the drop down (or ditching the custom implementation but then loosing the cross browser styling on the other hand).

Issues:

• When limiting the width of the select component in the wrapper and the value is longer than the width, it won't cut of like in a standard html select field and instead wraps the text. So you have to know beforehand the maximum length of all possible option values.
  

• When the screen space at the bottom isn't enough to unfold the drop down options it just cuts of the options. It should instead open on top of the drop down field when there's not enough space available.
  

[cabutler10]

Issue 1: I think we simply need to update the component behind it (downshift) as they already have a solution for it (https://codesandbox.io/s/usecombobox-usage-vzi7n).

Issue 2: This is a CSS issue as we were constrained to UI/UX designs. Material-UI uses downshift as well and they use some nice react features to get around this issue, but the dropdown menu is not forced to be directly attached to the input (https://material-ui.com/components/selects/).

@julicore, how would you like to proceed? We can
A) (fast solution) Allow dropdowns to behave like the Material-UI example or
B) (slow solution) We need to build new behaviour so that dropdown menu can go above AND below the input.

[byjs-dev]

I fixed the overflow behaviour in general with css. It won't behave like an input field but it will expand the height for the text.

@cabutler10 The other issue should be moved to zeppelin-element-library-react or/and zeppelin-element-library-vue as long as we do not provide the js here. What do you think?