Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix restoring value of typeUserAttr select when attribute name is className #1538

Merged
merged 2 commits into from
Mar 13, 2024
Merged

Fix restoring value of typeUserAttr select when attribute name is className #1538

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f5a361a
fix: restoring value of typeUserAttr select with attributeName className
lucasnetau Mar 11, 2024
c002163
fix: take a copy of typeUserAttr when processing
lucasnetau Mar 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions src/js/form-builder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -701,7 +701,7 @@ function FormBuilder(opts, element, $) {
const attrValType = userAttrType(typeUserAttr[attribute])
if (attrValType !== 'undefined') {
const orig = mi18n.get(attribute)
const tUA = typeUserAttr[attribute]
const tUA = Object.assign({}, typeUserAttr[attribute]) //Ensure we work on a copy of the attributes
let origValue = tUA.value
if (attrValType === 'boolean') {
tUA[attribute] ??= tUA.value
Expand All @@ -722,7 +722,6 @@ function FormBuilder(opts, element, $) {
}

i18n[attribute] = orig
tUA.value = origValue
} else if (attrValType === 'undefined' && hasSubType(values, attribute)) {
advField.push(processTypeUserAttrs(typeUserAttr[attribute], values))
} else {
Expand Down Expand Up @@ -784,14 +783,14 @@ function FormBuilder(opts, element, $) {
*/
function selectUserAttrs(name, fieldData) {
const { multiple, options, label: labelText, value, class: classname, className, ...restData } = fieldData
const selectValues = fieldData.hasOwnProperty(name) ? fieldData[name] : value || []
const optis = Object.keys(options).map(val => {
const attrs = { value: val }
const optionTextVal = options[val]
const optionText = Array.isArray(optionTextVal) ? mi18n.get(...optionTextVal) || optionTextVal[0] : optionTextVal
if (Array.isArray(value) ? value.includes(val) : val === value) {
attrs.selected = null
if (Array.isArray(selectValues) ? selectValues.includes(val) : val === selectValues) {
attrs.selected = true
}

return m('option', optionText, attrs)
})

Expand Down
109 changes: 104 additions & 5 deletions tests/form-builder.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -485,15 +485,15 @@ describe('FormBuilder typeUserAttrs detection', () => {
typeUserAttrs: {
'*': {
testSelectAttribute: {
label: 'Class', // i18n support by passing and array eg. ['optionCount', {count: 3}]
multiple: true, // optional, omitting generates normal <select>
label: 'Test Select',
multiple: false,
options: {
'red form-control': 'Red',
'green form-control': 'Green',
'blue form-control': 'Blue'
},
style: 'border: 1px solid red',
value: 'Red',
value: 'red form-control',
}
},
},
Expand All @@ -509,7 +509,106 @@ describe('FormBuilder typeUserAttrs detection', () => {

const input = fbWrap.find('.text-field .testSelectAttribute-wrap select')
expect(input.length).toBe(1)
expect(input.val()).toEqual(['green form-control'])
expect(input.val()).toEqual('green form-control')
})
test('can load formData with value for select typeUserAttr into stage where attribute name is className', async() => {
const config = {
typeUserAttrs: {
'*': {
className: {
label: 'Class',
multiple: false,
options: {
'red form-control': 'Red',
'green form-control': 'Green',
'blue form-control': 'Blue'
},
style: 'border: 1px solid red',
value: 'red form-control',
}
},
},
}
const fbWrap = $('<div>')
const fb = await fbWrap.formBuilder(config).promise
fb.actions.setData([
{
type: 'text',
className: 'green form-control',
}
])

const input = fbWrap.find('.text-field .className-wrap select')
expect(input.length).toBe(1)
expect(input.val()).toEqual('green form-control')
})

test('fix GH-1534', async() => {
const config = {
typeUserAttrs: {
'*': {
className: {
label: 'Class',
multiple: false,
options: {
'red form-control': 'Red',
'green form-control': 'Green',
'blue form-control': 'Blue'
},
style: 'border: 1px solid red',
value: 'red form-control',
}
},
},
}
const fbWrap = $('<div>')
const fb = await fbWrap.formBuilder(config).promise
fb.actions.setData([
{
type: 'text',
className: 'green form-control',
},
{
type: 'text',
className: 'blue form-control',
}
])

const input = fbWrap.find('.text-field .className-wrap select')
expect(input.length).toBe(2)
expect($(input.get(0)).val()).toEqual('green form-control')
expect($(input.get(1)).val()).toEqual('blue form-control')
})

test('can load formData with value for multi select typeUserAttr into stage', async() => {
const config = {
typeUserAttrs: {
'*': {
testSelectAttribute: {
label: 'Test Select',
multiple: true,
options: {
'red form-control': 'Red',
'green form-control': 'Green',
'blue form-control': 'Blue'
},
style: 'border: 1px solid red',
value: 'red form-control',
}
},
},
}
const fbWrap = $('<div>')
const fb = await fbWrap.formBuilder(config).promise
fb.actions.setData([
{
type: 'text',
testSelectAttribute: ['green form-control','blue form-control'],
}
])
const input = fbWrap.find('.text-field .testSelectAttribute-wrap select')
expect(input.length).toBe(1)
expect(input.val()).toEqual(['green form-control','blue form-control'])
})
})

Expand All @@ -530,7 +629,7 @@ describe('FormBuilder can return formData', () => {
'name': 'textarea-1696482495077',
'required': false,
}
]
]

test('as JSON', async () => {
const fbWrap = $('<div>')
Expand Down
Loading