Skip to content
This repository has been archived by the owner on Dec 19, 2024. It is now read-only.

Commit

Permalink
add form reset for dynamicaly enabled / disabled elements
Browse files Browse the repository at this point in the history
  • Loading branch information
@200Puls
200Puls committed Apr 6, 2018
1 parent b2c0d4b commit 990cf32
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 17 deletions.
42 changes: 25 additions & 17 deletions iron-form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@
},

_saveInitialValues: function() {
var nodes = this._getValidatableElements();
var nodes = this._getResettableElements();
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
if (!this._defaults.has(node)) {
Expand Down Expand Up @@ -354,7 +354,7 @@
}

// Load the initial values.
var nodes = this._getValidatableElements();
var nodes = this._getResettableElements();
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
if (this._defaults.has(node)) {
Expand Down Expand Up @@ -427,34 +427,39 @@
}
},

_getResettableElements: function() {
return this._findElements(this._form, true /* ignoreName */, false /* skipSlots */, true /* ignoreDisabled */);
},

_getValidatableElements: function() {
return this._findElements(this._form, true /* ignoreName */, false /* skipSlots */);
return this._findElements(this._form, true /* ignoreName */, false /* skipSlots */, false /* ignoreDisabled */);
},

_getSubmittableElements: function() {
return this._findElements(this._form, false /* ignoreName */, false /* skipSlots */);
return this._findElements(this._form, false /* ignoreName */, false /* skipSlots */, false /* ignoreDisabled */);
},

/**
* Traverse the parent element to find and add all submittable nodes to `submittable`.
* @param {!Node} parent The parent node
* @param {!boolean} ignoreName Whether the name of the submittable nodes should be disregarded
* @param {!boolean} ignoreDisabled Whether the disabled state of the submittable nodes should be disregarded.
* @param {!boolean} skipSlots Whether to skip traversing of slot elements
* @param {!Array<!Node>=} submittable Reference to the array of submittables
* @return {!Array<!Node>}
* @private
*/
_findElements: function(parent, ignoreName, skipSlots, submittable) {
_findElements: function(parent, ignoreName, skipSlots, ignoreDisabled, submittable) {
submittable = submittable || [];
var nodes = Polymer.dom(parent).querySelectorAll('*');
for (var i = 0; i < nodes.length; i++) {
// An element is submittable if it is not disabled, and if it has a
// name attribute.
if (!skipSlots &&
(nodes[i].localName === 'slot' || nodes[i].localName === 'content')) {
this._searchSubmittableInSlot(submittable, nodes[i], ignoreName);
this._searchSubmittableInSlot(submittable, nodes[i], ignoreName, ignoreDisabled);
} else {
this._searchSubmittable(submittable, nodes[i], ignoreName);
this._searchSubmittable(submittable, nodes[i], ignoreName, ignoreDisabled);
}
}
return submittable;
Expand All @@ -466,10 +471,11 @@
* @param {!Array<!Node>} submittable Reference to the array of submittables
* @param {!Node} node The slot or content node
* @param {!boolean} ignoreName Whether the name of the submittable nodes should be disregarded
* @param {!boolean} ignoreDisabled Whether the disabled state of the submittable nodes should be disregarded.
* @return {void}
* @private
*/
_searchSubmittableInSlot: function(submittable, node, ignoreName) {
_searchSubmittableInSlot: function(submittable, node, ignoreName, ignoreDisabled) {
var assignedNodes = Polymer.dom(node).getDistributedNodes();

for (var i = 0; i < assignedNodes.length; i++) {
Expand All @@ -479,10 +485,10 @@

// Note: assignedNodes does not contain <slot> or <content> because
// getDistributedNodes flattens the tree.
this._searchSubmittable(submittable, assignedNodes[i], ignoreName);
this._searchSubmittable(submittable, assignedNodes[i], ignoreName, ignoreDisabled);
var nestedAssignedNodes = Polymer.dom(assignedNodes[i]).querySelectorAll('*');
for (var j = 0; j < nestedAssignedNodes.length; j++) {
this._searchSubmittable(submittable, nestedAssignedNodes[j], ignoreName);
this._searchSubmittable(submittable, nestedAssignedNodes[j], ignoreName, ignoreDisabled);
}
}
},
Expand All @@ -492,31 +498,33 @@
* and add all submittable nodes to `submittable`.
* @param {!Array<!Node>} submittable Reference to the array of submittables
* @param {!Node} node The node to be
* @param {!boolean} ignoreName Whether the name of the submittable nodes should be disregarded
* @param {!boolean} ignoreName Whether the name of the submittable nodes should be disregarde
* @param {!boolean} ignoreDisabled Whether the disabled state of the submittable nodes should be disregarded.
* @return {void}
* @private
*/
_searchSubmittable: function(submittable, node, ignoreName) {
if (this._isSubmittable(node, ignoreName)) {
_searchSubmittable: function(submittable, node, ignoreName, ignoreDisabled) {
if (this._isSubmittable(node, ignoreName, ignoreDisabled)) {
submittable.push(node);
} else if (node.root) {
this._findElements(node.root, ignoreName, true /* skipSlots */, submittable);
this._findElements(node.root, ignoreName, true /* skipSlots */, ignoreDisabled, submittable);
}
},

/**
* An element is submittable if it is not disabled, and if it has a
* An element is submittable if it is not disabled or disabled is ignored, and if it has a
* 'name' attribute. If we ignore the name, check if is validatable.
* This allows `_findElements` to decide if to explore an element's shadowRoot or not:
* an element implementing `validate()` is considered validatable, and we don't
* search for validatables in its shadowRoot.
* @param {!Node} node
* @param {!boolean} ignoreName
* @param {!boolean} ignoreDisabled Whether the disabled state of the submittable nodes should be disregarded.
* @return {boolean}
* @private
*/
_isSubmittable: function(node, ignoreName) {
return (!node.disabled && (ignoreName ? node.name || typeof node.validate === 'function' : node.name));
_isSubmittable: function(node, ignoreName, ignoreDisabled) {
return ((ignoreDisabled || !node.disabled) && (ignoreName ? node.name || typeof node.validate === 'function' : node.name));
},

_serializeElementValues: function(element) {
Expand Down
23 changes: 23 additions & 0 deletions test/basic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -234,6 +234,17 @@
</template>
</test-fixture>

<test-fixture id="reset-disabled">
<template>
<iron-form>
<form action="/get" method="get">
<paper-input name="paper1" id="disabled_element" value="paper1" disabled="true"></paper-input>
<input type="reset">
</form>
</iron-form>
</template>
</test-fixture>

<test-fixture id="reset-dynamic-polymer1">
<template>
<iron-form>
Expand Down Expand Up @@ -897,6 +908,18 @@
});
})

test('reset a dynamically enabled element', function(done) {
var form = fixture('reset-disabled');

Polymer.Base.async(function() {
document.getElementById('disabled_element').disabled = false;
document.getElementById('disabled_element').value = 'input1++';
form.reset();
expect(document.getElementById('disabled_element').value).to.be.equal('paper1');
done();
}, 1);
})

test('reset dynamic element', function(done) {
var form;

Expand Down

0 comments on commit 990cf32

Please sign in to comment.