ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(form-core): make sure .formElements stays in sync with dom order

Browse source
This commit is contained in:
Thomas Allmer 2020-11-18 08:38:29 +01:00
parent 1412032607
commit 4bacc17b16
3 changed files with 25 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/soft-walls-swim.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/form-core': patch
---
Adding form elements at the top of a form now adds them to the beginning of the `.formElements` to keep it in sync with the dom order.

2
packages/form-core/src/registration/FormRegistrarMixin.js
View file

@ -80,7 +80,7 @@ const FormRegistrarMixinImplementation = superclass =>
child.__parentFormGroup = this; child.__parentFormGroup = this;
// 1. Add children as array element // 1. Add children as array element
if (indexToInsertAt > 0) { if (indexToInsertAt >= 0) {
this.formElements.splice(indexToInsertAt, 0, child); this.formElements.splice(indexToInsertAt, 0, child);
} else { } else {
this.formElements.push(child); this.formElements.push(child);

26
packages/form-core/test-suites/FormRegistrationMixins.suite.js
View file

@ -133,25 +133,37 @@ export const runRegistrationSuite = customConfig => {
it('adds elements to formElements in the right order (DOM)', async () => { it('adds elements to formElements in the right order (DOM)', async () => {
const el = /** @type {RegistrarClass} */ (await fixture(html` const el = /** @type {RegistrarClass} */ (await fixture(html`
<${parentTag}> <${parentTag}>
<${childTag}></${childTag}> <${childTag} pos="0"></${childTag}>
<${childTag}></${childTag}> <${childTag} pos="1"></${childTag}>
<${childTag}></${childTag}> <${childTag} pos="2"></${childTag}>
</${parentTag}> </${parentTag}>
`)); `));
/** INSERT field before the pos=1 */
/** /**
* @typedef {Object.<string, string>} prop * @typedef {Object.<string, string>} prop
*/ */
const newField = /** @type {RegisteringClass & prop} */ (await fixture(html` const newField = /** @type {RegisteringClass & prop} */ (await fixture(html`
<${childTag}></${childTag}> <${childTag}></${childTag}>
`)); `));
newField.myProp = 'test'; newField.setAttribute('pos', 'inserted-before-1');
el.insertBefore(newField, el.children[1]); el.insertBefore(newField, el.children[1]);
expect(el.formElements.length).to.equal(4); expect(el.formElements.length).to.equal(4);
const secondChild = /** @type {RegisteringClass & prop} */ (el.children[1]); const secondChild = /** @type {RegisteringClass & prop} */ (el.children[1]);
expect(secondChild.myProp).to.equal('test'); expect(secondChild.getAttribute('pos')).to.equal('inserted-before-1');
expect(el.formElements[1].myProp).to.equal('test'); expect(el.formElements[1].getAttribute('pos')).to.equal('inserted-before-1');
/** INSERT field before the pos=0 (e.g. at the top) */
const topField = /** @type {RegisteringClass & prop} */ (await fixture(html`
<${childTag}></${childTag}>
`));
topField.setAttribute('pos', 'inserted-before-0');
el.insertBefore(topField, el.children[0]);
// expect(el.formElements.length).to.equal(5);
const firstChild = /** @type {RegisteringClass & prop} */ (el.children[0]);
expect(firstChild.getAttribute('pos')).to.equal('inserted-before-0');
expect(el.formElements[0].getAttribute('pos')).to.equal('inserted-before-0');
}); });
describe('FormRegistrarPortalMixin', () => { describe('FormRegistrarPortalMixin', () => {