Forge UI - MacroConfig not showing saved Select Option from external API

Forge
, ,
1

I have a Confluence Macro using Forge UI. There is a MacroConfig, which calls an external api via fetch to populate the Select Options

The Select Options are all getting populated correctly, but after the initial save, when going back to the MacroConfig, the Select does NOT show the saved value. It is still saved (I know because the correct data is showing in the Macro), but it is not reflected in the UI.

const Config = () => {
  const [projectsData] = useState(async () => await Forecast.getProjects());

  return (
    <MacroConfig>
      <TextField name='title' label='Title' defaultValue={DefaultConfig.title} />
      <TextArea name='rowsConfig' label='Rows Config (JSON)' defaultValue={JSON.stringify(DefaultConfig.rowsConfig, null, 2)} />
      <Select name='projectIds' label='Projects' isMulti={true}>
      {projectsData?.projects?.map((project) =>
        <Option label={project.client_name ? `${project.client_name}: ${project.name}` : project.name} value={project.id} />
      )}
      </Select>
    </MacroConfig>
  );
};

I think there might be a race condition, where the projectsData is not populated before the Select is rendered, but I’m not sure.

Any help would be appreciated.

2

Note: I found this post: How to build a dynamic form in MacroConfig panel? - #7 by spall
And I tried the following, but it still isn’t working:

const Config = () => {
  const [projectsData] = useState(Forecast.getProjects);

  return (
    <MacroConfig>
      <TextField name='title' label='Title' defaultValue={DefaultConfig.title} />
      <TextArea name='rowsConfig' label='Rows Config (JSON)' defaultValue={JSON.stringify(DefaultConfig.rowsConfig, null, 2)} />
      <Select name='projectIds' label='Projects' isMulti={true}>
      {projectsData?.projects?.map((project) =>
        <Option label={project.client_name ? `${project.client_name}: ${project.name}` : project.name} value={project.id} />
      )}
      </Select>
    </MacroConfig>
  );
};

The Select Options are populated, but the saved value is not shown when the MacroConfig is edited after the save.

3

I figured it out. The issue was the project.id value was an number, but the Select is expecting a string

working code

const Config = () => {
  const [projectsData] = useState(Forecast.getProjects);

  return (
    <MacroConfig>
      <TextField name='title' label='Title' defaultValue={DefaultConfig.title} />
      <TextArea name='rowsConfig' label='Rows Config (JSON)' defaultValue={JSON.stringify(DefaultConfig.rowsConfig, null, 2)} />
      <Select name='projectIds' label='Projects' isMulti={true}>
      {projectsData?.projects?.map((project) =>
        <Option label={project.client_name ? `${project.client_name}: ${project.name}` : project.name} value={`${project.id}`} />
      )}
      </Select>
    </MacroConfig>
  );
};