The "disabled" property does not work for the case when a user deletes selected options with the keyboard.

[dima-sasg]

Version

• Vue version: 3

Description

Preconditions: Multiselect has selected options, and the Multiselect has prop disabled set to true.
If, in this case, a user clicks on the Multiselect area (which is greyed out in case the component is disabled) and after that presses the "backspace" or "delete" key on the keyboard, the result will be that the selected option is deleted and not be selected anymore, you can repeat pressing the "backspace" key till all the options are deleted.

Is this intended behavior? Since, in my understanding, the disabled prop should act as the Multiselect is not responsive to user actions in this case. Thank you.

Demo

https://jsfiddle.net/somethinglikethis/d5kncw0g/5/

[mesutuca33]

Thank you for reporting this issue.

I have encountered the same behavior, and I believe this is unintended for the disabled prop. The component should ignore user actions, including the Backspace or Delete keys, when disabled is set to true.

As a temporary fix, you can modify the file @vueform/multiselect/dist/multiselect.mjs at around line 3382, where the case 'Backspace': logic resides.

Here is the original code:

case 'Backspace':
  if (mode.value === 'single') {
    return;
  }

You can update it to the following:

case 'Backspace':
  if (mode.value === 'single' || mode.value === 'multiple') {
    return;
  }

This ensures that Backspace does nothing in both single and multiple modes, effectively preventing the removal of selected options.

Why this is a temporary fix

This approach only works until the package is updated or rebuilt. The proper solution would be for the disabled prop to universally block all user actions, including keypress events like Backspace and Delete.