NcSelect: Selected options should not overflow the container

[susnux]

If the selected option is longer than the element it should not overflow the NcSelect but use ellipsis.

before	with min-width: 0	with hidden disabled search

As you can see currently the option overflows the select, note the actions (dropdown toggle) are missing because they are placed outside the select underneath other elements on the right.

After fixing the overflow there is still this weird height issues, which happens because .vs__selected-options have flex-wrap set and contain the search input even if it is disabled (searchable=false).
This can be fixed by removing the search input from the visible dom when not used.

I already submitted a upstream PR, but I doubt that it will be merged soon.

[susnux]

Fixing the width issue is fine, but the selected option still overflows 🖼️

This is caused by position: absolute added when opening the menu.
I fixed this by setting a max-width.

But, hiding the input field prevents the dropdown from closing. It now only closes when you select an option, but not when you click outside anymore.

Ah did not noticed that, thank you! Fixed that as well.

[susnux]

PR for the nextcloud fork of the vue-select: nextcloud-libraries/vue-select#18

(Forgot that we are using a custom fork and not the vanilla upstream)

[raimund-schluessler]

I just noticed that these two lines create issues when the NcSelect component has :no-wrap="true"set. See here:

[raimund-schluessler]

@susnux I created a new issue for this: #3808

[mejo-]

Mh, shall we revert the PR for this release @raimund-schluessler?

[raimund-schluessler]

I don't really have a preference here.

[mejo-]

I don't think there's a need for rush, so let's try to get this solved before releasing 7.7.0. @susnux would you prefer to look for a fix or to revert the PR for 7.7.0?

[susnux]

I will look for a fix.