Merge pull request #11 from openizr/0.0.22

Fix a bug with activeStep Form prop, introduced in release 0.0.21

library/src/scripts/react/containers/Form.tsx

@@ -101,23 +101,23 @@ const ActualForm = (props: InferProps<typeof propTypes>): JSX.Element => {
 export default function Form(props: InferProps<typeof propTypes>): JSX.Element | null {
   const { i18n } = props;
   const { configuration, customComponents, activeStep } = props;
-  const [formElement, setFormElement] = React.useState<JSX.Element | null>(null);
+  const [key, setKey] = React.useState(generateRandomId);
 
   // Each time configuration changes, we want to generate a new Form component
   // to take those changes in account.
   React.useEffect(() => {
-    setFormElement(
-      <ActualForm
-        i18n={i18n}
-        activeStep={activeStep}
-        key={generateRandomId()}
-        configuration={configuration}
-        customComponents={customComponents}
-      />,
-    );
+    setKey(generateRandomId());
   }, [configuration]);
 
-  return formElement;
+  return (
+    <ActualForm
+      key={key}
+      i18n={i18n}
+      activeStep={activeStep}
+      configuration={configuration}
+      customComponents={customComponents}
+    />
+  );
 }
 
 Form.propTypes = propTypes;

playground/src/scripts/react.tsx

@@ -8,10 +8,44 @@ interface ExtendedNodeModule extends NodeModule {
   hot: { accept: () => void };
 }
 
+const App = (): JSX.Element => {
+  const [conf, setConf] = React.useState(configuration);
+  const [activeStep, setActiveStep] = React.useState('start');
+  React.useEffect(() => {
+    setTimeout(() => {
+      setConf({
+        root: 'start',
+        id: 'test',
+        steps: {
+          start: { fields: ['mess', 'submit'] },
+        },
+        fields: {
+          mess: {
+            type: 'Message',
+            label: '{{email}} - {{test}}',
+          },
+          submit: {
+            type: 'Button',
+            label: 'Submit',
+          },
+        },
+      });
+    }, 5000);
+    setTimeout(() => {
+      setActiveStep('end');
+    }, 3000);
+  }, []);
+
+  return (
+    <Form
+      activeStep={activeStep}
+      configuration={conf}
+    />
+  );
+};
+
 function main(): void {
-  ReactDOM.render(<Form
-    configuration={configuration}
-  />, document.querySelector('#root'));
+  ReactDOM.render(<App />, document.querySelector('#root'));
 }
 
 // Ensures DOM is fully loaded before running app's main logic.