When instantiating a Form that uses a `FieldArray` , in both cases `~init=None` && `~init=Some([])`, nested elements inside the `FieldArray` do not update as expected.

[KateChanthakaew]

Description

Calling Form.use(. ~init=None, ...) or with Form.use(. ~init=Some([]), ...), notice the FieldArray elements are not updating as expected.

Reproduction

We create a FieldArray named LoginArray to contain the field Login as the nested elements. Our example below is driven from the FieldArray example found in Everything.res.

Note: The bug occurs when a FieldArray is nested inside a FieldProduct, and also when a FieldProduct is the element inside a FieldArray. The issue occurs for filterIdentity and filterGrace type FieldArray, however we're just showing the filterIdentity version with a Form.use(. ~init=Some([]), ...) in our example below.

module Status = {
  @react.component
  let make = (~title=?, ~enum: Store.enum, ~error) => {
    <div className={`status ${enum->Store.enumToA}`}>
      {title->Option.map(x => `${x}: `->React.string)->Option.or(React.null)}
      {`${error->Option.or(enum->Store.enumToPretty)}`->React.string}
    </div>
  }
}

module LoginArray = {
  module Field = FieldArray.Make(
    Login.Field,
    {
      type t = Login.Field.t
      let filter = FieldArray.filterIdentity
    },
  )

  let validate = (out: Field.output) => {
    if out->Array.length < 2 {
      Error("Must choose at least two logins")
    } else {
      Ok()
    }
    ->Promise.return
    ->Promise.delay(~ms=1000)
  }

  let contextDefault: Field.context = {
    validate,
    empty: _ => [],
    element: Login.contextValidate,
  }

  module Input = {
    @react.component
    let make = (~form: Fields.Form.t<Field.t, Field.actions<unit>>) => {
      let forms = form->Field.split

      let handleAdd = e => {
        e->ReactEvent.Mouse.preventDefault
        e->ReactEvent.Mouse.stopPropagation
        form.actions.add(None)
      }
      let handleRemove = (~index, e) => {
        e->ReactEvent.Mouse.preventDefault
        e->ReactEvent.Mouse.stopPropagation
        form.actions.remove(index)
      }
      let handleClear = e => {
        e->ReactEvent.Mouse.preventDefault
        e->ReactEvent.Mouse.stopPropagation
        form.actions.clear()
      }

      let handleReset = e => {
        e->ReactEvent.Mouse.preventDefault
        e->ReactEvent.Mouse.stopPropagation
        form.actions.reset()
      }

      <div>
        {forms
        ->Array.mapi((f, i) => {
          <div className="row" key=`${i->Int.toString}`>
            <div className="column">
              <Login.Input form=f />
            </div>
            <button className="button-clear" onClick={handleRemove(~index=i)}>
              {"✕"->React.string}
            </button>
          </div>
        })
        ->React.array}
        <div className="row">
          <Status
            title="Addresses" enum={form.field->Field.enum} error={form.field->Field.printError}
          />
        </div>
        <div className="row">
          <button className="button-clear column column-20" onClick={handleAdd}>
            {"Add One"->React.string}
          </button>
          <button className="button-clear float-left" onClick={handleReset}>
            {"Reset"->React.string}
          </button>
          <button className="button-clear float-left" onClick={handleClear}>
            {"Clear"->React.string}
          </button>
        </div>
      </div>
    }
  }
}

module Field = LoginArray.Field
module Form = UseField.Make(Field)

@react.component
let make = (~onSubmit) => {
  let form = Form.use(.
    ~context=LoginArray.contextDefault,
    ~init=None,
    ~validateInit=false,
  )

  Js.log2("form.field: ", form.field->Field.show)

  let handleSubmit = React.useMemo1( () => {
    (_) => form.field->Field.output->Option.map(onSubmit)->Option.void
  }, [form.field->Field.output])

	<div className="container">
		<form onSubmit={handleSubmit}>
			<h2>{"Addresses"->React.string}</h2>
			<LoginArray.Input form />
			<button type_="submit"> {"Sign In"->React.string} </button>
		</form>
	</div>
}

• 2.1 when supplied with ~init=None, we show there is a valid onChange with a target[value] but the field does not receive the changed values.

array_None.mov

• 2.2 Similar to 2.1, If we init with ~init=Some([ ]), updating the FieldArray element's fields does not propagate the changes to the FieldArray parent.

array_some-empty-array.mov

Expected Behavior

• Expected form.field and its FieldArray elements to store their updated values on a field.actions.set(value).

[AlexMouton]

Hi Kate.
It looks like that only happens when the child is a Product (Or the other way around like you said?) is that right?
If i replace the product with a single string it looks like it works.

[AlexMouton]

I added your repro as an example, and added a first unit test here: https://github.com/AlexMouton/rescript-fields/pull/new/array-product

The unit test doesn't seem to capture the issue, if you want to look at it.

[KateChanthakaew]

@AlexMouton Thanks for your response. I'll take a look and let you know.

[KateChanthakaew]

Hi Alex. I created a new test file here FieldArrayV2_test.res.
https://github.com/noble-ai/rescript-fields/compare/kate/example-LoginArray?expand=1

In this FieldArrayV2_test.res, when I ran the test it failed 2 cases line 177 and line 218. Not sure if I wrote this test correctly, so I'd like to confirm with you.

[cid8600]

@AlexMouton, besides the FieldArray test @KateChanthakaew wrote above, when I run the example out of the box with yarn install; yarn rescript build; yarn run examples:login, and try to type into the fields username or password, no updates happen in the field. Please see issue 2 (#2). This happens when init=None, like it does on line 85 of Login.res. If you change that to init=Some({username: "", password: ""), you'll get the validation error, but subsequent onChange typing in the fields works as expected. This is with just a Product2.

example init=None
https://github.com/user-attachments/assets/fc397e97-6730-4529-99a5-cfdeab58a331

example ~init=Some({ username: "", password: "", }),
https://github.com/user-attachments/assets/178f8689-8047-41d8-b3ef-d68a466ce81d

[AlexMouton]

Hey Cid That is surprisingly broken. Can you find a version where examples:login does work? A

…

On Wed, Nov 20, 2024 at 9:56 AM Cid Donham ***@***.***> wrote: @AlexMouton <https://github.com/AlexMouton>, besides the FieldArray test @KateChanthakaew <https://github.com/KateChanthakaew> wrote above, when I run the example out of the box with yarn install; yarn rescript build; yarn run examples:login, and try to type into the fields username or password, no updates happen in the field. Please see issue 2 (#2 <#2>) https://github.com/user-attachments/assets/fc397e97-6730-4529-99a5-cfdeab58a331 — Reply to this email directly, view it on GitHub <#3 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAPFVMR25O5CI42ZTSZ6IJ32BTEM3AVCNFSM6AAAAABN74YFUOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIOBZGIZDMMBSGA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[cid8600]

@AlexMouton Beta5 is published. I do believe this issue is now resolved.