fix: cannot use 'in' operator to search for "value" (#345)

* fix: cannot use 'in' operator to search for "value"

close ant-design/ant-design#33380

* fix: tsc errors

Author: afc163

src/Field.tsx

@@ -72,7 +72,7 @@ export interface InternalFieldProps<Values = any> {
   validateTrigger?: string | string[] | false;
   validateFirst?: boolean | 'parallel';
   valuePropName?: string;
-  getValueProps?: (value: StoreValue) => object;
+  getValueProps?: (value: StoreValue) => Record<string, unknown>;
   messageVariables?: Record<string, string>;
   initialValue?: any;
   onReset?: () => void;
@@ -265,12 +265,12 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
         }
         break;
 
-        /**
-         * In case field with `preserve = false` nest deps like:
-         * - A = 1 => show B
-         * - B = 1 => show C
-         * - Reset A, need clean B, C
-         */
+      /**
+       * In case field with `preserve = false` nest deps like:
+       * - A = 1 => show B
+       * - B = 1 => show C
+       * - Reset A, need clean B, C
+       */
       case 'remove': {
         if (shouldUpdate) {
           this.reRender();

src/FormContext.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react';
-import { ValidateMessages, FormInstance, FieldData, Store } from './interface';
+import type { ValidateMessages, FormInstance, FieldData, Store } from './interface';
 
-export interface Forms {
-  [name: string]: FormInstance;
-}
+export type Forms = Record<string, FormInstance>;
 
 export interface FormChangeInfo {
   changedFields: FieldData[];

src/index.tsx

@@ -12,15 +12,15 @@ const InternalForm = React.forwardRef<FormInstance, FormProps>(FieldForm) as <Va
   props: React.PropsWithChildren<FormProps<Values>> & { ref?: React.Ref<FormInstance<Values>> },
 ) => React.ReactElement;
 
-type InternalForm = typeof InternalForm;
-interface RefForm extends InternalForm {
+type InternalFormType = typeof InternalForm;
+interface RefFormType extends InternalFormType {
   FormProvider: typeof FormProvider;
   Field: typeof Field;
   List: typeof List;
   useForm: typeof useForm;
 }
 
-const RefForm: RefForm = InternalForm as RefForm;
+const RefForm: RefFormType = InternalForm as RefFormType;
 
 RefForm.FormProvider = FormProvider;
 RefForm.Field = Field;

src/interface.ts

@@ -220,13 +220,13 @@ type RecursivePartial<T> = T extends object
 export interface FormInstance<Values = any> {
   // Origin Form API
   getFieldValue: (name: NamePath) => StoreValue;
-  getFieldsValue(): Values;
-  getFieldsValue(nameList: NamePath[] | true, filterFunc?: (meta: Meta) => boolean): any;
+  getFieldsValue: (() => Values) &
+    ((nameList: NamePath[] | true, filterFunc?: (meta: Meta) => boolean) => any);
   getFieldError: (name: NamePath) => string[];
   getFieldsError: (nameList?: NamePath[]) => FieldError[];
   getFieldWarning: (name: NamePath) => string[];
-  isFieldsTouched(nameList?: NamePath[], allFieldsTouched?: boolean): boolean;
-  isFieldsTouched(allFieldsTouched?: boolean): boolean;
+  isFieldsTouched: ((nameList?: NamePath[], allFieldsTouched?: boolean) => boolean) &
+    ((allFieldsTouched?: boolean) => boolean);
   isFieldTouched: (name: NamePath) => boolean;
   isFieldValidating: (name: NamePath) => boolean;
   isFieldsValidating: (nameList: NamePath[]) => boolean;

src/utils/valueUtil.ts

@@ -119,7 +119,7 @@ export function isSimilar(source: SimilarObject, target: SimilarObject) {
 
 export function defaultGetValueFromEvent(valuePropName: string, ...args: EventArgs) {
   const event = args[0];
-  if (event && event.target && valuePropName in event.target) {
+  if (event && event.target && typeof event.target === 'object' && valuePropName in event.target) {
     return (event.target as HTMLInputElement)[valuePropName];
   }
 

tests/index.test.js

@@ -704,4 +704,26 @@ describe('Form.Basic', () => {
     });
     expect(form.getFieldsValue(['password'], meta => meta.touched)).toEqual({});
   });
+
+  it('should not crash when return value contains target field', async () => {
+    const CustomInput = ({ value, onChange }) => {
+      const onInputChange = e => {
+        onChange({
+          value: e.target.value,
+          target: 'string',
+        });
+      };
+      return <Input value={value} onChange={onInputChange} />;
+    };
+    const wrapper = mount(
+      <Form>
+        <Field name="user">
+          <CustomInput />
+        </Field>
+      </Form>,
+    );
+    expect(() => {
+      wrapper.find('Input').simulate('change', { event: { target: { value: 'Light' } } });
+    }).not.toThrowError();
+  });
 });