fix: pass down listeners to the input node closes #3048

logaretm · Nov 25, 2020 · 2526a63 · 2526a63
1 parent 8efbde4
commit 2526a63
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 15 deletions.
diff --git a/packages/vee-validate/src/Field.ts b/packages/vee-validate/src/Field.ts
@@ -94,26 +94,28 @@ export const Field = defineComponent({
         : handleInput;
 
     const { validateOnInput, validateOnChange, validateOnBlur, validateOnModelUpdate } = getConfig();
+    const baseOnBlur = [handleBlur, ctx.attrs.onBlur, validateOnBlur ? validateField : undefined].filter(Boolean);
+    const baseOnInput = [
+      onInputHandler,
+      valueTick,
+      validateOnInput ? onChangeHandler : undefined,
+      ctx.attrs.onInput,
+    ].filter(Boolean);
+    const baseOnChange = [
+      onInputHandler,
+      valueTick,
+      validateOnChange ? onChangeHandler : undefined,
+      ctx.attrs.onChange,
+    ].filter(Boolean);
+
     const makeSlotProps = () => {
       const fieldProps: Record<string, any> = {
         name: props.name,
-        onBlur: [handleBlur],
-        onInput: [onInputHandler, valueTick],
-        onChange: [onInputHandler, valueTick],
+        onBlur: baseOnBlur,
+        onInput: baseOnInput,
+        onChange: baseOnChange,
       };
 
-      if (validateOnInput) {
-        fieldProps.onInput.push(onChangeHandler);
-      }
-
-      if (validateOnChange) {
-        fieldProps.onChange.push(onChangeHandler);
-      }
-
-      if (validateOnBlur) {
-        fieldProps.onBlur.push(validateField);
-      }
-
       if (validateOnModelUpdate) {
         fieldProps['onUpdate:modelValue'] = [onChangeHandler, valueTick];
       }

diff --git a/packages/vee-validate/tests/Field.spec.ts b/packages/vee-validate/tests/Field.spec.ts
@@ -677,4 +677,24 @@ describe('<Field />', () => {
     await flushPromises();
     expect(span?.textContent).toBe('true');
   });
+
+  // #3048
+  test('proxies native listeners', async () => {
+    const onBlur = jest.fn();
+    mountWithHoc({
+      setup() {
+        return {
+          onBlur,
+        };
+      },
+      template: `
+      <Field name="field" @blur="onBlur" />
+    `,
+    });
+
+    await flushPromises();
+    const input = document.querySelector('input');
+    dispatchEvent(input as HTMLInputElement, 'blur');
+    expect(onBlur).toHaveBeenCalledTimes(1);
+  });
 });