Vue-select: Delete key clears vue-select even if clearable is false

[GiuMagnani]

If I put the focus on the select with tab key and press backspace, the vue-select gets emptied and returns null. This also happens if I pass the new clearable prop as false.

I need that the vue-select never returns a null value.

Is there any way to fix this behaviour?

[GiuMagnani]

It also happens if I click the vue-select and press the backspace or supr.

[larizzatg]

any update on this?

[kepeder]

If anyone having problems with this; a workaround:

watch: {
  country: function (current, prev) {
    if (current === null && prev !== null) {
      this.country = Object.assign({}, prev)
    }
  }
}

[GiuMagnani]

I have 50-100 select components in my app, so that solution is not really convenient. At the end, I changed my components to the Element select: https://element.eleme.io/#/en-US/component/select

[hrobertson]

@sagalbot I don't think this change was fully thought through. It can't be considered just a bug fix - it changes the functional behaviour of vue-select.

Prior to this change, the only effect of the clearable prop was to specify whether the clear button should be displayed as per the showClearButton method. - i.e. it was a purely aesthetic option which did not effect the functional behaviour.

After #723, the selection cannot be cleared by pressing backspace or delete. When multiple=true, selections can still be deselected by clicking the X on the option but not by pressing backspace or delete. This seems like incorrect behaviour to me.

I suggest that the previous behaviour be restored and a new prop allowNull should be added which when false prevents the value from being unset, and for multiple=true ensure that at least one option is selected.

[sblawrie]

Yes, I agree with @hrobertson. This seems like a bug. When I delete a selection using backspace or delete, it clears the selection from the dropdown but it does not remove it from the model. If I delete the selection by clicking the X, it works properly.