Multiple input in Text field

[jerome-dm]

Description:

When I add an input to the render function or the build function without an event and type words into it, it replaces the formdata value. ps : Can you explain the difference between the onRender function and the build function?

Environment Details:

• formBuilder Version: 3.19.12
• Browser: Chrome
• OS: Win

Expected Behavior

During input, the formData value should be that of the initial input

Actual Behavior

During input, the formData value is replaced by the appended input

Steps to Reproduce

Add this script

if (!window.fbControls) {
  window.fbControls = []
}
window.fbControls.push(function (controlClass) {

  class controlText2 extends controlClass {
    static get definition() {
      return {
        icon: '📝',
        i18n: {
          default: 'Champs de texte',
        },
        mi18n: {
          text: 'Texte',
          date: 'Date',
          file: 'Fichier',
        },
        defaultAttrs: {
          'hasComment': {
            'label': 'Commentaire',
            value: true,
            type: 'checkbox',
          },
        }
      }
    }

    build() {
      let {name, comment, ponderation} = this.config
      name = this.config.multiple ? `${name}[]` : name
      this.input = this.markup('input', null, {...this.config, name: name})
      this.container = this.markup('div', this.input)

      const input = document.createElement('input')
      input.type = 'text'
      input.placeholder = 'Commentaire'
      input.classList.add('mt-3', 'form-control')
      this.container.appendChild(input)

      return this.container
    }

    onRender() {
    }
  }

  controlClass.register(['text', 'file', 'date', 'number'], controlText2)
  controlClass.register(['text', 'password', 'email', 'color', 'tel'], controlText2, 'text')
  controlClass.register(['date', 'time', 'datetime-local'], controlText2, 'date')
  controlClass.register(['number', 'range'], controlText2, 'number')
})

Place a new Text input Fill the comment input Check the formData value

jsfiddle here : https://jsfiddle.net/gh4eqx0u/5/

[lucasnetau]

build() creates the element and is called anytime the field is modified in formBuilder onRender() is called after the element created in build() is added to the DOM (in general case, when testing with Jest it may not be in the DOM yet)

In general usage with formBuilder the custom controls build and onRender functions are called multiple times. With formRender they are only called once during initial render