Skip to content

Changing the display from form to wizard to form and then removing the panel breaks the builder #616

@llemire-exp

Description

@llemire-exp

Describe the bug
When you render the FormBuilder, if you change the display type from form to wizard and then back to form, the builder is still on wizard mode after adding a new component and the component you just tried to add disappear until you click on the +page button

To Reproduce
Steps to reproduce the behavior:

  1. Render the builder using the <FormBuilder /> component
  2. keep a reference to the builder using the onBuilderReady prop
  3. change the display type to wizard (using the builder reference)
  4. change the display type back to form (using the builder reference)
  5. remove the remaining panel
  6. add a new textfield

Expected behavior
The builder should be in form mode and behave normally

Screenshots
Gif demonstrating the issue

Image

Sandbox Example
builder-display-bug.zip

the zip file contain a simple vite app unzip it, run npm i and npm run dev to test the issue, here is the actual code used to recreate the bug:

import { FormBuilder } from "@formio/react";
import { useCallback, useRef } from "react";

function App() {
	const ref = useRef(null);
	const onBuilderReady = useCallback((builder) => {
		ref.current = builder;
	}, []);

    return (
        <>
			<select onChange={(e) => {
				ref.current.setDisplay(e.target.value);
			}}>
				<option value="form">form</option>
				<option value="wizard">wizard</option>
			</select>
			<FormBuilder onBuilderReady={onBuilderReady}/>
        </>
    );
}

export default App;

Desktop (please complete the following information):

  • OS: Windows
  • Browser Chrome
  • Version Version 137.0.7151.104 (Official Build) (64-bit)

Smartphone (please complete the following information):

Not tested

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions