Setting alllow-empty=false still shows "press enter to remove" label & style

[danielHalan]

Reproduction Link

https://jsfiddle.net/to40pq2v/

Steps to reproduce

set alllow-empty = false on a non-multi-select

Expected behaviour

When mouse over "selected" value, don't show "click to remove" and remove-styling, as the item will not be removed (rightly so)

• Expected same style as any other item, or possibly "lighter" shade of select-color indicating it is already selected.

Actual behaviour

Showing 'press enter to remove' and red-styling.

[sylann]

I don't know if one of the current pull requests handles this already, but I think the following should fix this issue:

Really quick and simplified pseudo solution:

{
  computed: {
    removeDisabled() {
      return this.allowEmpty && (!this.multiple || this.value.length <= 1) 
    }
  }
}

<div ... :class="{'multiselect__option--highlight': currentLogic && !removeDisabled}" .../>

[abhic91]

I am still facing this. Is it not fixed still? version - 2.1.6

[AhoyLemon]

Was able to workaround this problem with the deselect-label prop.

<VueMultiselect
  :allow-empty="false"
  deselect-label="Selected"
  :options="['Option 1', 'Second Option', 'Option Three']"
  >
</VueMultiselect>

At that stage, it's a matter of reskinning that red bit...

.multiselect__option--selected.multiselect__option--highlight[data-deselect="Selected"] { background:#f3f3f3; color:unset;
  &:after { background:unset; color:unset; }
}