This is a copy of issue #4297 that I raised on formio.js

Environment

• Hosting type
  • Local deployment
    • Version: Linux Ubuntu 20.03
• Formio.js version: 4.14.0-rc.20
• Frontend framework: Vue2+vue-formio+Vite
• Browser: Chrome/Firefox
• Browser version: Latest

Steps to Reproduce

1. git clone https://github.com/mgurzixo/vvf1.git
2. cd vvf1
3. pnpm install
4. pnpm run dev
5. Start a browser @ http://localhost:3000/
6. Select 'Builder' option
7. Insert a 'Layout / Field Set' component
8. In the modal, click on 'Save'

Expected behaviour:

The modal closes and the component is inserted.

Observed behaviour:

The modal does not close.

Discussion

I am trying to setup formiojs to run with Vue and Vite. I got excellent results, and published a basic template. When testing it, everything worked smoothly with most components, except for a few of them where it is impossible to close the modal. All the Save/Cancel/Remove/X buttons are non-responsive.

This occurs on Chrome and Firefox.

The dev version uses Vite with HMR. But this occurs also with the production version which uses Rollup internally:

pnpm run build
pnpm run serve

This occurs with the following components:

• Field Set
• Panel
• Well

But this does not occur with the others, and NOT with Columns (which is based also on NestedComponent)

I started to debug using DevTools, and it looks like editComponent() in [Webformbuilder.js] around line 1445 install eventListeners, but sometime later those handlers vanish, causing the modal to become unresponsive.

I tried to look at the code, but it is rather complex (I heard about formio just 1 week ago...) and I did not found where the problem came. I tried to fiddle with custom components, with the bug occuring sometime, sometime not...

I understand that my configuration is rather exotic, but I think that there is definitively a daemon lurking around in the deep...

Thanks if someone can have a look!

Michel