fix: fix lookup of label for custom controls when constructing contro…

…l panel and adding field

src/js/controls.js

@@ -66,8 +66,10 @@ export default class Controls {
       // first check if this is a custom control
       let custom = this.custom.lookup(type)
       let controlClass
+      let label
       if (custom) {
         controlClass = custom.class
+        label = this.custom.label(type)
       } else {
         custom = {}
 
@@ -76,9 +78,9 @@ export default class Controls {
         if (!controlClass || !controlClass.active(type)) {
           continue
         }
+        label = controlClass.label(type)
       }
       const icon = custom.icon || controlClass.icon(type)
-      let label = custom.label || controlClass.label(type)
       const iconClassName = !icon ? custom.iconClassName || `${css_prefix_text + type.replace(/-[\d]{4}$/, '')}` : ''
 
       // if the class has specified a custom icon, inject it into the label

src/js/form-builder.js

@@ -292,7 +292,9 @@ function FormBuilder(opts, element, $) {
         // check for a custom type
         const custom = controls.custom.lookup(field.type)
         if (custom) {
+          const customType = field.type
           field = Object.assign({}, custom)
+          field.label = controls.custom.label(customType)
         } else {
           const controlClass = controls.getClass(field.type)
           field.label = controlClass.label(field.type)

tests/control/custom.test.js

@@ -404,4 +404,32 @@ describe('Test Custom Control', () => {
     expect(fbWrap.find('#starRating-1697591966052-0')[0].outerHTML).toBe('<span id="starRating-1697591966052-0"></span>')
 
   })
+
+  test('custom replacedField with invalid type throws Error', async () => {
+    const fbWrap = $('<div>')
+
+    const replaceFields = [{
+      type: 'nonExistent'
+    }]
+
+    let error
+    await fbWrap.formBuilder({replaceFields}).promise.catch(e => error = e)
+
+    expect(error).toBeInstanceOf(Error)
+    expect(error.message).toMatch(/Error while registering custom field:/)
+  })
+
+  test('custom replacedField with missing type throws Error', async () => {
+    const fbWrap = $('<div>')
+
+    const replaceFields = [{
+        value: 1
+    }]
+
+    let error
+    await fbWrap.formBuilder({replaceFields}).promise.catch(e => error = e)
+
+    expect(error).toBeInstanceOf(Error)
+    expect(error.message).toMatch(/Ignoring invalid custom field definition. Please specify a type property./)
+  })
 })

tests/translation.test.js

@@ -35,6 +35,38 @@ describe('FormBuilder stage names translated', () => {
     expect(fbWrap.find('.readonly-wrap label').text()).toBe(config.i18n.override['en-US'].readOnly)
   })
 
+  test('can change label of built-in control via replaceFields GH-1578', async () => {
+    const config = {
+      replaceFields: [{
+        label: ['myTranslateLabel'],
+        type: 'text'
+      }],
+      i18n: {
+        location: LANGUAGE_LOCATION,
+        override: {
+          'en-US': {
+            myTranslateLabel: 'Translated Field',
+          }
+        }
+      }
+    }
+
+    const fbWrap = $('<div>')
+    const fb = await $(fbWrap).formBuilder(config).promise
+
+    const overrideField = fbWrap.find('.cb-wrap .input-control[data-type*="text-"]')
+
+    expect(overrideField.find('span').text()).toBe(config.i18n.override['en-US'].myTranslateLabel)
+
+    //@TODO support adding custom fields via addField
+    //const field = {
+    //  type: overrideField.data('type'),
+    //  class: 'form-control'
+    //}
+    //fb.actions.addField(field)
+    //expect(fbWrap.find('.fld-label').val()).toBe(config.i18n.override['en-US'].myTranslateLabel)
+  })
+
   test('can set form to another language than default with config', async () => {
     const config = {
       i18n: {