We need the selected-tag and input to have the same line height, and
same border widths so the height of the content (either a selected-tag
or the input) is stable. Otherwise the v-select will change height by a
few pixels when a value is selected vs empty.
Flexbox means we can rely on each child of the selected-options
container pushing itself way from neighbors, while also wrapping to
multiple lines when the width gets short! So we're removing the
hard-coded heights and letting things flow as they might, with inner
padding and outer margins doing the work of keeping sufficient space
between things.
`flex-grow` will stretch the input to take all remaining space, but We
need to ensure a small amount of space so there's room to type input.
We'll set the input to "hidden" (via width: 0) when the dropdown is
closed, to prevent adding a "blank" line (see:
https://github.com/sagalbot/vue-select/pull/512). In that case, the
flex-grow will still stretch the input to take any available space, on
the same "line."
This really needs https://github.com/sagalbot/vue-select/pull/512 to
work best.
We might have "empty" space w/in the select box, but outside of the
input. In that case, we still want to toggle the dropdown when clicking
on that "empty" space.
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.
Jeff