Fixing unexpected linebreak on single selects

[eriknygren]

Fixes #460

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

Before:

After:

Reason for being broken:

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.

PS not sure if I did something weird with the indentation in the spec file?

[sagalbot]

Looks good! Will test asap.

[fractalocity]

It looks awesome! Nice fix @eriknygren

[eriknygren]

Great, thanks guys! Let me know if you need anything more from me. Happy to help

[BasConijn]

I think this is the same problem as #225.

[eriknygren]

bump, would love to go back to pointing to the master branch on my project 😎

@sagalbot any idea when you'll have some time to test this? anything I can do to help?

[sagalbot]

@eriknygren agreed! I'm way behind over here. I know I won't have time today to checkout the branch, but if I recall correctly on my quick review I remember noticing some issues with multiple selects.

Could you have a look and let me know what you find? Maybe I'm not remembering and this can be merged right now. I also have to get the feature/filterable-prop merged and tagged for a release. I got hung up on naming there, got busy, and haven't merged. It's pretty much good to go.

[eriknygren]

@sagalbot can't see any regressions regarding multiple select mode, the input used to be width: auto during multiple select mode, and it remains so.

Attached a quick video of how it interacts in multiple mode above, looks good to me but you know the component better than me!

[aabraham88]

@sagalbot first of all, I really appreciate this beautiful plugin, congrats for your work, it's very useful. I'm using it in an NGO project. Right now I'm experiencing this issue as the other ones commented above. I understand that is just a cosmetic issue, but It would be helpful if you guys can review this pull request and merge into master. Thanks for all. 👍

[tursics]

bump ;) Merging this pull request will improve single selections a lot. Leave it as current state would be odd

[Lovatt]

Would be great to have this merged in, i'm using a lot of these selectors in a project currently and the layout is suffering 😩

Keep up the great work though!

[eriknygren]

@tursics @aabraham88 @Lovatt as a temporary workaround you could always update your dependency to point to this PR until it's merged. That's what I'm doing.

So in your package.json go:

    "vue-select": "https://github.com/eriknygren/vue-select.git#3aec695",

Clearly we all prefer not being on a fork, but just thought I'd mention it.

[Lovatt]

Thanks @eriknygren, i didn't know you could do that! 😌

[Lovatt]

@eriknygren i tried your branch in my project, it did indeed fix the formatting issues, but it looks like it breaks search

[eriknygren]

@eriknygren i tried your branch in my project, it did indeed fix the formatting issues, but it looks like it breaks search

@Lovatt hmm, in what way? I'm not convinced that's related to this change. But I'd like to confirm, thanks.

Edit:
Testing update:

Seems fine, I don't believe your issue is linked.

[stevenharman]

In my testing, display: none can mess up the vertical alignment of the clear button and the dropdown arrow. Perhaps we consider the following instead, as they preserve the height of the input element, and the vertical alignment of the other elements?

width: 0px;
padding: 0;

[eriknygren]

Good shout @stevenharman , will update

[stevenharman]

Just discovered the same issue. Any hope for getting this merged 🔜?

For what it's worth, the following hack seems to work around the issue... for now. Maybe?

.v-select.single .selected-tag + input[type="search"] {
  padding: 0;
  width: 0px !important;
}

[sagalbot]

@stevenharman can you provide steps to reproduce? I have a couple hours free this morning and would love to get this one merged.

[stevenharman]

@sagalbot Sure. You can actually see it in action on the demo pages: https://codepen.io/sagalbot/pen/qxbPLY

Go there in Firefox/Chrome, and then turn on the responsive design dev tool. Shrink the viewport down to less than ~380px wide and you'll see the following:

[eriknygren]

@sagalbot just noticed an issue where the input was incorrectly hidden if the user re-opens the dropdown after already having a selected item. I added another commit to fix that, hopefully it’s fairly clear what’s going on. Let me know if you want me to squish the commits or something.

Also, added your suggestion @stevenharman.

16b6bd7

[stevenharman]

Nice catch @sagalbot. Looking forward to this being merged and released! Thanks!

[stevenharman]

Or, rather... nice catch, @eriknygren. And @sagalbot is that sufficient to reproduce, test the fix, and get this merged and released?

Thanks!

[eriknygren]

bump @sagalbot

[stevenharman]

@sagalbot @eriknygren The more I play with these changes, the more I'm certain that we should also be "hiding" the input for a multi-select, just as we do for single select. That is, remove the check for !this.multiple from the hidden class:

inputClasses() {
  return {
    hidden: !this.isValueEmpty && !this.dropdownOpen,
    shrunk: this.multiple && !this.isValueEmpty,
    empty: this.isValueEmpty,
  }
}

Everything still seems to work as expected, with the added benefit of not adding a second, blank, line to multi-selects.

Possibly related - one way to fix this would be to use a flex-box layout for the selected options, input, loading, and clear buttons.

So two questions:

1. Can we also hide for multi-select?
2. @sagalbot would you be open to using a flex-box based layout for the internals?

[eriknygren]

Thanks @stevenharman I'll add your suggestion and try it out later today

[sagalbot]

@stevenharman yes! Flex based layout has been on my must-do list for months.

[eriknygren]

@stevenharman I took your suggestion for a spin, it fixes the bug you've mentioned, and works in all but one scenario. Because the multiple select leaves the input on loosing focus the behaviour is a bit "out of the norm" when this occurs.

Hopefully this gif explains what I mean:

I'd vote for leaving multi select to another pull request. I think this can be merged as-is and it'll add value. Then we can think of another solution for the multiple mode.

[stevenharman]

@eriknygren Sounds good. I feel like much of this can be simplified and solved by #594, which I built with your changes in this PR in mind. Once this PR is merged, I'll revisit #594 and tweak it accordingly.

[eriknygren]

Perfect, thanks @stevenharman. Let's get this show on the road 🛣

[sagalbot]

Thanks for the patience and the great work @eriknygren!!

[aabraham88]

Excellent work guys! 🎊 Do you know when this will come available in a release? Thanks in advance.

[eriknygren]

My pleasure, thanks for taking the time and writing this mega useful component!

[aabraham88]

Hi everyone. Sorry for bother you with this question, but how do I do to update the package with npm to have this fix? Thanks in advance.

[kyrpas]

@aabraham88 I just managed to add this fix to my project. Here's what I did, I hope it works out for you too.

Since the changes have been merged to master, we could pull the master branch using npm install --save sagalbot/vue-select#pull/512/head but it still won't work because the changes are only in the src folder and when you're importing vue-select in your project it pulls the files from the dist folder. So you need to build the dist files again.

According to #306 if you want to rebuild the dist folder, you need to clone the repo in a separate folder. It won't work if you try to npm run install and build inside the vue-select folder in the node_modules of your project.

So, first, I cloned the project into a local directory: git clone https://github.com/sagalbot/vue-select.git
Then went into the folder and ran npm install.
Finally I ran npm run build.

That built the project and re-created the dist folder using the latest code from src.

I then copied over the files from the new dist folder over the node_modules/vue-select/dist folder in my project and everything worked fine.

This really doesn't feel like the right way to do it but until there's an official release this works fine for me.

[aabraham88]

Hi @kyrpas I will try your suggestion. Thanks!

[eriknygren]

@aabraham88 @kyrpas Did you try what I previously suggested?
I rebuilt the dist on my master branch, so in your package.json:

"vue-select": "https://github.com/eriknygren/vue-select.git#3aec695",

With you current solution @kyrpas you'll loose the fix if you re-download the dependencies

[kyrpas]

@eriknygren I did see your comment on June 4, then realised your fork is a few commits behind the original master branch and chose to rebuild from master. To be honest, none of the two solutions are ideal but since they're only temporary I'm ok with either one. I see your point though. Your suggestion is more robust. Any idea as to when to expect a new release? Is there anything we can do to help?

[cor]

I'm also very curious on a release date of a version that includes this patch. When can we expect this? I'll use @eriknygren 's fix in the meantime.

[aabraham88]

Hi everyone. I had the opportunity to test this in my project, and I think I found a bug. Here is the gif video of the test.
http://recordit.co/bUl3YnLj9Q
In my case, I'm using the plugin with Ajax to retrieve the data. The selected value appears there because is retrieved from the database when the component is initialized. The example shows the scenario when the user wants to change the current value. Instead of clicking on the "X", I clicked on the Down Arrow, showing me that there isn't any option available. That's because the user didn't write down anything yet.
The expected behavior would be to let the user close the "empty list" and let him write another word replacing the current value.
The problem is that I can't close the dropdown, in order to see the "X" again, and there is no turning back in this state.
I copy here my component props configuration:

<v-select
        :options="dataCoordinadores"
        label="nombre"
        placeholder="Escribe el nombre o apellido"
        name="coordinador"
        id="coordinador"
        v-model="coordinadorSeleccionado"
        v-bind:disabled="this.readonly"
        :filterable=false
        @search="onSearch"
        :onChange=this.actualizarCoordinador()
>
</v-select>

I hope you can tell me if I'm doing something wrong or instead is an issue. I just want to say that this issue is not reproducible before the change introduced in this pull request.

Thanks!

[stevenharman]

@aabraham88 I have something similar in my usage, though we do add the pre-loaded value to the "available" list of options when mounting the component. That said, clicking the the dropdown clears the value so the user can search. They can close the dropdown by clicking the ^. Does that not work for your case?

[aabraham88]

@stevenharman no, in my case it didn't work. As you can see in the video, clicking on the ^ doesn't close the list. I could check with another select input that has preloaded values, that this does not occur. It allows you to click on ^ and close the dropdown.

[stevenharman]

Ahh, I just realized I also have #594 applied to my app. That outstanding PR is built atop this one, and has a much more versatile and robust layout scheme. I wonder... if you try that branch, do you still see the issue?

[matneves]

Hi there, I'm still seen the unexpected linebreak on single selects.

I'm currently using vue-select v3.1.0 along with bootstrap v4.

[matt-snider]

@matneves I had the same issue with vue-select v3.1.0 and bootstrap v4. This did it for me in a component that is using vue-select:

<template>
    <v-select
        class="my-select"
        //... other options
    />
</template>

<style scoped>
.my-select >>> input.vs__search {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
</style>

Note, I'm using vue-loader and the >>> is the deep selector syntax.

[wilderdyd]

Hi, The same issue still persists in vue-select 3.10.3. I could solve this for my project with the next CSS properties:

.v-select .vs__selected-options{
flex-wrap: nowrap;
white-space: nowrap;
overflow: hidden;
}