fix(VComboBox): disallow items editing when readonly (#9429)

fixes #8867

* fix(vcombobox): disallow items editing when readonly

* test(vautocomplete): add test

* refactor(vautocomplete): adjust test

Author: YipingRuan

packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts

@@ -256,7 +256,7 @@ export default VSelect.extend({
         keyCodes.backspace,
         keyCodes.delete,
       ].includes(keyCode) &&
-        !this.getDisabled(currentItem)
+        !this.getDisabled(currentItem) && !this.readonly
       ) {
         const newIndex = this.selectedIndex === index
           ? this.selectedIndex - 1

packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.ts

@@ -494,4 +494,27 @@ describe('VAutocomplete.ts', () => {
 
     expect(wrapper.vm.genSelections()).toEqual([])
   })
+
+  it('should not delete item if readonly', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        items: ['a', 'b', 'c'],
+        multiple: true,
+        value: ['a', 'b', 'c'],
+      },
+    })
+    wrapper.vm.changeSelectedIndex(keyCodes.right)
+    wrapper.vm.changeSelectedIndex(keyCodes.right)
+    wrapper.vm.changeSelectedIndex(keyCodes.backspace)
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.selectedItems).toHaveLength(2)
+
+    wrapper.setProps({
+      readonly: true,
+    })
+
+    wrapper.vm.changeSelectedIndex(keyCodes.backspace)
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.selectedItems).toHaveLength(2)
+  })
 })