fix(VFileInput): fix rogue change events (#8193)

v-file-input was emitting a change event both when pressing enter, and when it was blurred

closes #8167

packages/vuetify/src/components/VFileInput/VFileInput.ts

@@ -209,6 +209,14 @@ export default VTextField.extend({
       const files = [...(e.target as HTMLInputElement).files || []]
 
       this.internalValue = this.isMultiple ? files : files[0]
+
+      // Set initialValue here otherwise isFocused
+      // watcher in VTextField will emit a change
+      // event whenever the component is blurred
+      this.initialValue = this.internalValue
+    },
+    onKeyDown (e: KeyboardEvent) {
+      this.$emit('keydown', e)
     },
     truncateText (str: string) {
       if (str.length < Number(this.truncateLength)) return str

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

@@ -192,4 +192,43 @@ describe('VFileInput.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
   })
+
+  // https://github.com/vuetifyjs/vuetify/issues/8167
+  it('should not emit change event when blurred', async () => {
+    const change = jest.fn()
+    const wrapper = mountFunction({
+      listeners: {
+        change,
+      },
+    })
+
+    const input = wrapper.find('input')
+
+    input.trigger('focus')
+    await wrapper.vm.$nextTick()
+
+    // TODO: Is there a better way to fake the file change event?
+    wrapper.vm.onInput({ target: {} })
+
+    input.trigger('blur')
+    await wrapper.vm.$nextTick()
+
+    expect(change).toHaveBeenCalledTimes(1)
+  })
+
+  it('should not emit change event when pressing enter', async () => {
+    const change = jest.fn()
+    const wrapper = mountFunction({
+      listeners: {
+        change,
+      },
+    })
+
+    const input = wrapper.find('input')
+
+    input.trigger('keydown.enter')
+    await wrapper.vm.$nextTick()
+
+    expect(change).not.toHaveBeenCalled()
+  })
 })