Select initialValue not getting updated on re-render

[salujaharkirat]

Scope: Form Renderer

Description
I have a select component where I keep a list of options in the state. These options are updated from another field using FormSpy(change function).

Everything works fine but the initial value is not updated once the data is available. Is there something I am missing?

Following is the code:-

import React, {useState, useContext, useEffect} from "react";
import Select from "@data-driven-forms/mui-component-mapper/dist/cjs/select";
import FormSpy from "@data-driven-forms/react-form-renderer/dist/cjs/form-spy";



const StateWrapper = (props) => (
  <FormSpy>
    {(formSpyProps) => {
      return <State {...props} formSpyProps={formSpyProps} />;
    }}
  </FormSpy>
);

const State = ({
  formSpyProps,
  ...props
}) => {
  const [options, updateOptions] = useState([]);

  useEffect(() => {
    updateOptions([
      {
        label: "First",
        value: "F"
      }
    ]);
  }, []);

  props.initialValue = options.length ? options[0].value : null;

  return <Select {...props} options={options} />;
};

export default StateWrapper;

In the above if I remove the useEffect part and read directly from the state it works as expected.

import React, {useState, useContext, useEffect} from "react";
import Select from "@data-driven-forms/mui-component-mapper/dist/cjs/select";
import FormSpy from "@data-driven-forms/react-form-renderer/dist/cjs/form-spy";



const StateWrapper = (props) => (
  <FormSpy>
    {(formSpyProps) => {
      return <State {...props} formSpyProps={formSpyProps} />;
    }}
  </FormSpy>
);

const State = ({
  formSpyProps,
  ...props
}) => {
  const [options, updateOptions] = useState([      {
        label: "First",
        value: "F"
      }]);


  props.initialValue = options.length ? options[0].value : null;

  return <Select {...props} options={options} />;
};

export default StateWrapper;

Schema

<If it's possible, please provide a schema which reproduces the issue>

[Hyperkid123]

@JinxAc initial value is only ever set on the first component render. Meaning that if you change it, the consuming component won't be affected. Here is roughly the flow:

// before first render
{
  input: {
    value: undefined
  },
  meta: {
    initial: 'foo'
  }
}

// during field initialization initial value gest copied to value
{
  input: {
    value: 'foo'
  },
  meta: {
    initial: 'foo'
  }
}

// initial value change after render
{
  input: {
    value: 'foo'
  },
  meta: {
    initial: 'new initial value'
  }
}

The value has a higher priority than the initial value so it will ignore the new initial value.

To achieve this change, I would suggest adding an effect to your component and monitor the field meta. I guess you want to only change the initial value if it was not changed by the user directly. There is a handful of flags in the meta-object. And if the condition is fulfilled, use the formOptions.change (from useFormApi hook) or use the field API directly.

If you want to access the field state outside of the field, just call useFieldApi({name: 'name-from-props'}). This will give you input and meta objects which can be used to mutate the field state.

[rvsia]

Hey @JinxAc , I think you can make a simple workaround to reinitialize initialValue each time options are changed:

1. everytime options are changed, change key on the select (i.e. increase number by one)

This should ensure that the select will be re-mounted.

2. sets initializeOnMount = true

This ensures that the initialValue will be updated when the component is mounted.