fix(VSelect): disable arrows on readonly select (#11223)

fixes #11164 * fix(VSelect): disable arrows on readonly select * test(VSelect): add coverage for fix Co-authored-by: John Leider <john.j.leider@gmail.com>
vuetifyjs · Apr 24, 2020 · fd7a8b3 · fd7a8b3
1 parent c9cc289
commit fd7a8b3
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/packages/vuetify/src/components/VSelect/VSelect.ts b/packages/vuetify/src/components/VSelect/VSelect.ts
@@ -644,6 +644,8 @@ export default baseMixins.extend<options>().extend({
       }
     },
     onKeyDown (e: KeyboardEvent) {
+      if (this.readonly) return
+
       const keyCode = e.keyCode
       const menu = this.$refs.menu
 

diff --git a/packages/vuetify/src/components/VSelect/__tests__/VSelect4.spec.ts b/packages/vuetify/src/components/VSelect/__tests__/VSelect4.spec.ts
@@ -2,6 +2,7 @@
 import VSelect from '../VSelect'
 
 // Utilities
+import { waitAnimationFrame } from '../../../../test'
 import {
   mount,
   Wrapper,
@@ -304,6 +305,16 @@ describe('VSelect.ts', () => {
     await wrapper.vm.$nextTick()
 
     expect(wrapper.vm.internalValue).toBe('Foo')
+
+    input.trigger('keydown.up')
+
+    // Wait for keydown event to propagate
+    await wrapper.vm.$nextTick()
+
+    // Waiting for items to be rendered
+    await waitAnimationFrame()
+
+    expect(wrapper.vm.internalValue).toBe('Foo')
   })
 
   it('should emit listIndex event when navigated by keyboard', async () => {