Draggable / formeo

Drag & Drop Form Builder
http://draggable.github.io/formeo/
MIT License
533 stars 197 forks source link

Conditional rendering of fields breaks when more than one field referencing another #288

Open rustymcg9000 opened 4 years ago

rustymcg9000 commented 4 years ago

I would like a radio button with yes no to drive 2 following fields. A yes causes the first field to display and the second to hide. A no causes the first to hide and the second to display. I set this up as follows:

image

When i come to save or render I get the following error in the js console:

demo.min.js:24 Uncaught TypeError: Cannot read property 'parentElement' of null at Object.isVisible (demo.min.js:24) at Object.equals (demo.min.js:24) at t.execResult (demo.min.js:24) at demo.min.js:24 at Array.forEach () at demo.min.js:24 at Array.forEach () at demo.min.js:24 at Array.forEach () at demo.min.js:24

If i remove the second fields conditional statement (referencing the first radio button) the save and render returns to working

carperei commented 9 months ago

got it working, fixes below:

renderer.js: :~238

      isNotVisible: () => {
        // fix
        let parent = elem.parentElement;
        while (!parent.parentElement.classList.contains('formeo-column')) {
            parent = parent.parentElement;
        }
        parent.setAttribute('hidden', true);
        elem.required = false // Hidden input cannot be required.
      },
      isVisible: () => {
        //fix
        let parent = elem.parentElement;
        while (!parent.parentElement.classList.contains('formeo-column')) {
            parent = parent.parentElement;
        }
        parent.removeAttribute('hidden')
        elem.required = elem._required
      },

and :270

getComponent = address => { const componentId = address.slice(address.indexOf('.') + 1) const component = isExternalAddress(address) ? this.external[componentId] : this.renderedForm.querySelector([name^=f-${componentId}]) // fix return component }