fix: provide the value for a number attribute in the tUA array

kevinchappell · Feb 19, 2024 · 76db433 · 76db433
1 parent 2e79b69
commit 76db433
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 5 deletions.
diff --git a/src/js/form-builder.js b/src/js/form-builder.js
@@ -33,7 +33,7 @@ import {
   safename,
   forceNumber,
   getContentType,
-  generateSelectorClassNames,
+  generateSelectorClassNames, firstNumberOrUndefined,
 } from './utils'
 import { attributeWillClobber, setElementContent, setSanitizerConfig } from './sanitizer'
 import fontConfig from '../fonts/config.json'
@@ -682,8 +682,16 @@ function FormBuilder(opts, element, $) {
         if (attrValType !== 'undefined') {
           const orig = mi18n.get(attribute)
           const tUA = typeUserAttr[attribute]
-          const origValue = attrValType === 'boolean' ? tUA.value : (tUA.value || '')
-          tUA.value = values[attribute] || origValue
+          let origValue = tUA.value
+          if (attrValType === 'boolean') {
+            origValue = tUA.value
+            tUA[attribute] ??= tUA.value
+          } else if (attrValType === 'number') {
+            tUA[attribute] ??= firstNumberOrUndefined(values[attribute], origValue)
+          } else {
+            origValue ??= ''
+            tUA[attribute] ??= values[attribute] || origValue
+          }
 
           if (tUA.label) {
             i18n[attribute] = Array.isArray(tUA.label) ? mi18n.get(...tUA.label) || tUA.label[0] : tUA.label
@@ -871,7 +879,7 @@ function FormBuilder(opts, element, $) {
    */
   const numberAttribute = (attribute, values) => {
     const { class: classname, className, ...attrs } = values
-    const attrVal = (isNaN(attrs[attribute])) ? undefined : attrs[attribute]
+    const attrVal = (Number.isNaN(attrs[attribute])) ? undefined : attrs[attribute]
     const attrLabel = mi18n.get(attribute) || attribute
     const placeholder = mi18n.get(`placeholder.${attribute}`)
 

diff --git a/tests/form-builder.test.js b/tests/form-builder.test.js
@@ -199,6 +199,38 @@ describe('FormBuilder stage names translated', () => {
   })
 })
 
+describe('FormBuilder attribute setup', () => {
+  test('number control number attributes do not inherit field value when not set', async() => {
+    const config = {}
+    const fbWrap = $('<div>')
+    const fb = await fbWrap.formBuilder(config).promise
+    fb.actions.addField({
+      type: 'number',
+      value: '5.2',
+    })
+    expect(fbWrap.find('.value-wrap input').val()).toBe('5.2')
+    expect(fbWrap.find('.min-wrap input').val()).toBe('')
+    expect(fbWrap.find('.max-wrap input').val()).toBe('')
+    expect(fbWrap.find('.step-wrap input').val()).toBe('')
+  })
+  test('number control number attributes do not inherit field value when set', async() => {
+    const config = {}
+    const fbWrap = $('<div>')
+    const fb = await fbWrap.formBuilder(config).promise
+    fb.actions.addField({
+      type: 'number',
+      value: '5.2',
+      min: 2,
+      max: 10,
+      step: 1.0,
+    })
+    expect(fbWrap.find('.value-wrap input').val()).toBe('5.2')
+    expect(fbWrap.find('.min-wrap input').val()).toBe('2')
+    expect(fbWrap.find('.max-wrap input').val()).toBe('10')
+    expect(fbWrap.find('.step-wrap input').val()).toBe('1')
+  })
+
+})
 describe('FormBuilder typeUserAttrs detection', () => {
   test('renders text/string user attribute', async () => {
     const config = {
@@ -238,6 +270,27 @@ describe('FormBuilder typeUserAttrs detection', () => {
     expect(input.is(':checked')).toBeFalsy()
   })
   test('renders number user attribute when value is number', async () => {
+    const config = {
+      typeUserAttrs: {
+        text: {
+          testAttribute: {
+            label: 'test',
+            value: 10,
+          },
+        },
+      },
+    }
+    const fbWrap = $('<div>')
+    const fb = await fbWrap.formBuilder(config).promise
+    fb.actions.addField({
+      type: 'text',
+      value: '1',
+    })
+    const input = fbWrap.find('.testAttribute-wrap input')
+    expect(input.attr('type')).toBe('number')
+    expect(input.val()).toBe('10')
+  })
+  test('renders number user attribute when value is zero', async () => {
     const config = {
       typeUserAttrs: {
         text: {
@@ -250,9 +303,13 @@ describe('FormBuilder typeUserAttrs detection', () => {
     }
     const fbWrap = $('<div>')
     const fb = await fbWrap.formBuilder(config).promise
-    fb.actions.addField({ type: 'text'})
+    fb.actions.addField({
+      type: 'text',
+      value: '1',
+    })
     const input = fbWrap.find('.testAttribute-wrap input')
     expect(input.attr('type')).toBe('number')
+    expect(input.val()).toBe('0')
   })
   test('renders select user attribute when options given', async () => {
     const config = {