What
---
- Turn the autocomplete value on the `input` configurable by exposing it
as a prop.
Why
---
So it can be customised, which can be necessary to help developers show
or hide autocomplete forms as they wish.
The `filterFunction` prop does not exist in the source code. There is one called `filterBy` and I think it was just renamed at some point and you forgot to reflect it into the docs. That's just a blind guess tho, but I lost some time figuring out why the documented prop is not working, and that's why I decided to fix it. Hopefully others won't lost time on that, too :)
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.
Jeff