Bug: RadioGroup in config pane is not selectable

Forge Forge UI Kit and Custom UI
1

When adding a RadioGroup to a Confluence macro config pane, the RadioGroup is not selectable.

This minimal sample from documentation results in a non-functional RadioGroup.

import React, { useEffect, useState } from 'react';
import ForgeReconciler, { Text, RadioGroup, useConfig } from '@forge/react';

const defaultConfig = {color: 'purple'};

const options = [
  { name: 'color', value: 'red', label: 'Red' },
  { name: 'color', value: 'blue', label: 'Blue' },
  { name: 'color', value: 'yellow', label: 'Yellow' },
  { name: 'color', value: 'green', label: 'Green' },
  { name: 'color', value: 'black', label: 'Black' },
];

const Config = () => {
  return (
    <>
    <RadioGroup options={options} value="red"/>
    </>
  );
};

const App = () => {

  const config = useConfig() || defaultConfig;

  return (
    <>
      <Text>Color: {config.color}</Text>
    </>
  );
};

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

Upon adding the macro to a Confluence page it shows ā€˜purpleā€™ as expected.

image
image971Ɨ277 5.53 KB

When the macro config pane is opened the RadioGroup is ā€œhalf selectableā€ for lack of a better term. When you select an option, an outline will appear around the selection circle, but the item isnā€™t actually selected, and what appears to be stored in the config is either the empty string or a null value as the color value disappears from Text component.

image
image1195Ɨ292 6.41 KB

The null color persists from then on.

This seems pretty basic. What am I missing? Does anyone have a RadioGroup working in a macro config pane?

2

Hi @skatefriday , I tested your code snippet and can verify I was getting the same behaviour as you. Could you try replacing the value prop with name and see if it works?

<RadioGroup options={options} name="color" />

Note: It was not displaying and storing properly because the option values were not linked to the config values correctly. To link the option values from the config to the app, you need to specify the name prop in the component and give it the same value as the name prop youā€™ve defined for each of your options. This also applies to other components used in the config.

I will create a ticket to update the documentation around config components.

Thanks,
Yuwei

2 Likes
3

Thank you. That solves the problem.

This experience reinforces my assertion in the second paragraph here Bug: Macro configuration will not dynamically render components - #8 by skatefriday that the documentation around macro configuration could use a special section on the behavioral and requirements differences between UI Kit components when used within a configuration pane.

2 Likes