Change Select Dropdown options based on other Select Field value

[narangradhika24]

Hi Team,

We have a select field, field1 which uses loadOptions to get the values for dropdown options and once we select a value for field1 , an api should be triggered to fetch options for field2. ( field2 is also a dropdown field using loadOptions). To trigger the api on every field1 change we are using useEffect hook in FieldListener and the api is triggered but the results are not updated in dropdown field2. The services we are using in loadOptions are returning promises.
The field2 options should basically update if we change field1 value and the options in the field2 dropdown should be fetched from service.
Can you please check if we are missing something here. Or is there some other approach we can do the same.

Schema :

{
  "fields": [
    {
      "name": "listener",
      "component": "field-listener",
      "hideField": true
    },
    {
      "name": "field1",
      "label": "Field 1",
      "actions": {
        "loadOptions": [
          "serviceToLoadField1Options"
        ]
      },
      "component": "select",
      "validate": [
		        {
		          "type": "required"
		        }
		      ],
      "isSearchable": true
    },
    {
      "name": "field2",
      "label": "Field 2",
      "actions": {
        "loadOptions": [
          "serviceToLoadField2Options"
        ]
      },
      "component": "select",
	  "validate": [
		        {
		          "type": "required"
		        }
		      ],
      
      "isSearchable": true
    }
  ]
}

FieldListener

    const FieldListener = () => {
    const { getState, change } = useFormApi();
    const { field1} = getState().values;

  
    useEffect(() => {
      if (field1) {
        change("field2",undefined)
        serviceToLoadField2Options(field1)
      } 
    }, [field1]);
  
    return null;
  };

[rvsia]

Hello @narangradhika24

we recently dealt with the same issue on our Discord channel, please check this and following messages.

[rvsia]

I have added this to the examples section: #1285