This change move away from floats and absolute positioning in favor of
flexbox. Flexbox allows us to solve some of the more quirky issues we're
having with elements (e.g, the input) being too big, causing "extra line
breaks", vertical alignment of close buttons, etc... and simplified RTL
support!
I did need to introduce two new child elements to the `dropdown-toggle`
element. These are used to group all of the selected tags and the input
in one group. And the "actions" (clear button, dropdown indicator, and
spinner) in another. Doing so has the added benefit of no longer
allowing selected options from running "under" those other elements.
NOTE: The large blocks of change are due to white space differences from
indenting inside those new wrapper elements. View the diff ignoring
white space to see a more accurate representation of the change here.
What
---
- Removing hidden class from single inputs when the dropdown is hidden.
- Changing from `display:none` to zero width when hiding the input.
Why
---
Because the user will be typing for another element if reopening the
dropdown, which we need to allow.
I ran into this issue where the component was using the browser's default san-serif font, which of course we don't use. This will allow it to just take the font from the application its used in and continue on without much friction.
What
---
- Hiding the search input field if the component is in the single value
option.
- Making the search input field full width if no options are selected in
either single or multi select mode.
- Shrinking it to width auto if there are selected entries in multi
mode.
Why
---
The component broke into two lines when selecting a a value in single
mode, because an empty, non-interactable input field was pushed down to
the next row if the selected entry had a long label.
In the test suite sometimes a mutableValue array is passed when `multiple == false`. Using [].concat rather than an array literall allows valueAsArray to handle these cases. [].concat could handle the case when `multiple == true` as well.
Steven Harman