Set field.element as soon as possible

Otherwise emitFieldDidValidateEvent(field) won't contain field.element

Author: tkrotoff

CHANGELOG.md

@@ -1,3 +1,9 @@
+## Next
+
+### Fixes
+
+- Set field.element as soon as possible
+
 ## v0.15.0 (2020/03/05)
 
 ### Breaking Changes

packages/react-form-with-constraints/src/Field.ts

@@ -10,8 +10,7 @@ export class Field {
   // Can be useful for the user to get the DOM element
   // See https://github.com/tkrotoff/react-form-with-constraints/issues/41
   //
-  // Only available when the field has been validated
-  // Populated by FormWithConstraints._validateFields()
+  // Populated by FormWithConstraints.validateField()
   //
   // Cannot be set as readonly :/
   public element?: HTMLInput | TextInput;

packages/react-form-with-constraints/src/FormWithConstraints.tsx

@@ -6,7 +6,7 @@ import { withFieldWillValidateEventEmitter } from './withFieldWillValidateEventE
 import { withFieldDidValidateEventEmitter } from './withFieldDidValidateEventEmitter';
 import { withFieldDidResetEventEmitter } from './withFieldDidResetEventEmitter';
 import { Field } from './Field';
-import { IHTMLInput, InputElement, HTMLInput } from './InputElement';
+import { IHTMLInput, InputElement, HTMLInput, TextInput } from './InputElement';
 import { FieldsStore } from './FieldsStore';
 import { FieldFeedbackValidation } from './FieldFeedbackValidation';
 import { flattenDeep } from './flattenDeep';
@@ -84,24 +84,33 @@ export class FormWithConstraints
     for (let i = 0; i < inputs.length; i++) {
       const input = inputs[i];
       // eslint-disable-next-line no-await-in-loop
-      const field = await this.validateField(forceValidateFields, new InputElement(input));
-      if (field !== undefined) {
-        field.element = input as HTMLInput;
-        fields.push(field);
-      }
+      const field = await this.validateField(
+        forceValidateFields,
+        new InputElement(input),
+        input as HTMLInput | TextInput
+      );
+      if (field !== undefined) fields.push(field);
     }
 
     return fields;
   }
 
-  private async validateField(forceValidateFields: boolean, input: InputElement) {
+  private async validateField(
+    forceValidateFields: boolean,
+    input: InputElement,
+
+    // We need to pass the native input separately instead of it being a property of InputElement
+    // otherwise react-form-with-constraints-native unit tests will crash
+    nativeInput: HTMLInput | TextInput
+  ) {
     const fieldName = input.name;
     const field = this.fieldsStore.getField(fieldName);
 
     if (field === undefined) {
       // Means the field (<input name="username">) does not have a FieldFeedbacks
       // so let's ignore this field
     } else if (forceValidateFields || !field.hasFeedbacks()) {
+      field.element = nativeInput as HTMLInput | TextInput;
       field.clearValidations();
 
       this.emitFieldWillValidateEvent(fieldName);

packages/react-form-with-constraints/src/InputElement.ts

@@ -73,8 +73,10 @@ export class InputElement implements IHTMLInput {
 
   constructor(input: IHTMLInput | TextInput) {
     if (isHTMLInput(input)) {
+      // FIXME
       // eslint-disable-next-line no-param-reassign
       input = input as IHTMLInput;
+
       this.name = input.name;
       this.type = input.type;
       this.value = input.value;
@@ -90,8 +92,10 @@ export class InputElement implements IHTMLInput {
 
       this.validationMessage = input.validationMessage;
     } else {
+      // FIXME
       // eslint-disable-next-line no-param-reassign
       input = input as TextInput;
+
       this.name = input.props!.name;
       this.type = undefined as any;
       this.value = input.props!.value!; // Tested: TextInput props.value is always a string and never undefined (empty string instead)