RadioGroup default value and onchange event

I am trying to use RadioGroup with default value and on change event but having issue. Below is the code I have.

Issues:

  • onChange even is not calling filterOptionChange method.
  • When setting value property in the RadioGroup the way my code is currently. In the UI when changing selection it’s half selected and the initial radio button stay selected when changing.
  • Changing the ‘value’ property to ‘defaultValue’. When the form load noting is selected.
  • defaultValue: must be set before the form is loaded. We can’t await in the Edit component and updating default value (State variable) in the useEffect is too late.
  • useEffect getting called twice. Why?
import React, {useEffect, useState} from "react";
import ForgeReconciler, {
  Text,
  Em,
  useProductContext,
  Textfield,
  Form,
  Button,
  FormSection,
  FormFooter,
  Label,
  RequiredAsterisk,
  useForm,
  DynamicTable,
  Link,
  Stack,
  RadioGroup,
} from "@forge/react";
import { invoke, view } from "@forge/bridge";

export const Edit = () => {
  const { handleSubmit, register, getFieldId, formState } = useForm();
  const [selectedFilterOption, setSelectedFilterOption] = useState('');

  const filterOptions = [
    { name: 'team', value: 'delivery', label: 'Delivery' },
    { name: 'team', value: 'support', label: 'Support' },
    { name: 'team', value: 'customFilter', label: 'Custom Filter' },
  ];

  useEffect(() => {
    invoke('getStorageValue', {storageKey: 'filterOptions'}).then((result) => {
      setSelectedFilterOption(result);
    });
  }, [selectedFilterOption]);

  const filterOptionChange = (value) => {
    console.log('value changed.') // this does not get called
    console.log(value);
  };

  const configureGadget = async (data) => {
    console.log(data);
    setSelectedFilterOption(data.filter);

    await invoke('setStorageValue', {storageKey: 'filterOptions', value: data.filter});

    view.submit(data);
  };

  return (
    <Form onSubmit={handleSubmit(configureGadget)}>
      <FormSection>
        <Label labelFor={getFieldId("filter")}>
            Pick a Team or enter a Filter name. <RequiredAsterisk />
        </Label>
        <RadioGroup
          options={filterOptions}
          name="team"
          onChange={(e) => filterOptionChange(e)}
          value={selectedFilterOption}
          {...register("filter", { required: true })}
        />
        {formState.errors.filter && (
          <ErrorMessage>One of these options needs to be selected.</ErrorMessage>
        )}
      </FormSection>
      <FormFooter>
        <Button appearance="primary" type="submit">
          Submit
        </Button>
      </FormFooter>
    </Form>
  );
};

const View = () => {...};

const App = () => {
  const context = useProductContext();
  if (!context) {
    return "Loading...";
  }

  return context.extension.entryPoint === "edit" ? <Edit /> : <View />;
};

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Thanks,
AP

anyone got onchange event working for radio group or setting default value? or setting default value for any field using @forge/react package?

Thanks,
AP