happy-dom 8.8.0 → 9.0.0

package/lib/nodes/html-input-element/HTMLInputElement.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const HTMLElement_1 = __importDefault(require("../html-element/HTMLElement"));
-const ValidityState_1 = __importDefault(require("../validity-state/ValidityState"));
+const ValidityState_1 = __importDefault(require("../../validity-state/ValidityState"));
 const DOMException_1 = __importDefault(require("../../exception/DOMException"));
 const DOMExceptionNameEnum_1 = __importDefault(require("../../exception/DOMExceptionNameEnum"));
 const Event_1 = __importDefault(require("../../event/Event"));
@@ -13,6 +13,7 @@ const HTMLInputElementSelectionModeEnum_1 = __importDefault(require("./HTMLInput
 const HTMLInputElementSelectionDirectionEnum_1 = __importDefault(require("./HTMLInputElementSelectionDirectionEnum"));
 const HTMLInputElementValueStepping_1 = __importDefault(require("./HTMLInputElementValueStepping"));
 const FileList_1 = __importDefault(require("./FileList"));
+const NodeList_1 = __importDefault(require("../node/NodeList"));
 /**
  * HTML Input Element.
  *
@@ -28,15 +29,18 @@ class HTMLInputElement extends HTMLElement_1.default {
         // Related to parent form.
         this.formAction = '';
         this.formMethod = '';
-        this.formNoValidate = false;
         // Any type of input
         this._value = null;
         this._height = 0;
         this._width = 0;
         // Type specific: checkbox/radio
         this.defaultChecked = false;
+        this._checked = null;
         // Type specific: file
         this.files = new FileList_1.default();
+        // All fields
+        this.validationMessage = '';
+        this.validity = new ValidityState_1.default(this);
         // Events
         this.oninput = null;
         this.oninvalid = null;
@@ -45,7 +49,6 @@ class HTMLInputElement extends HTMLElement_1.default {
         this._selectionStart = null;
         this._selectionEnd = null;
         this._selectionDirection = HTMLInputElementSelectionDirectionEnum_1.default.none;
-        this._validationMessage = '';
     }
     /**
      * Returns height.
@@ -62,7 +65,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      */
     set height(height) {
         this._height = height;
-        this.setAttributeNS(null, 'height', String(height));
+        this.setAttribute('height', String(height));
     }
     /**
      * Returns width.
@@ -79,7 +82,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      */
     set width(width) {
         this._width = width;
-        this.setAttributeNS(null, 'width', String(width));
+        this.setAttribute('width', String(width));
     }
     /**
      * Returns size.
@@ -87,7 +90,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @returns Size.
      */
     get size() {
-        const size = this.getAttributeNS(null, 'size');
+        const size = this.getAttribute('size');
         if (size !== null) {
             return parseInt(size);
         }
@@ -99,7 +102,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @param size Size.
      */
     set size(size) {
-        this.setAttributeNS(null, 'size', String(size));
+        this.setAttribute('size', String(size));
     }
     /**
      * Returns minlength.
@@ -107,7 +110,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @returns Min length.
      */
     get minLength() {
-        const minLength = this.getAttributeNS(null, 'minlength');
+        const minLength = this.getAttribute('minlength');
         if (minLength !== null) {
             return parseInt(minLength);
         }
@@ -119,7 +122,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @param minLength Min length.
      */
     set minLength(minlength) {
-        this.setAttributeNS(null, 'minlength', String(minlength));
+        this.setAttribute('minlength', String(minlength));
     }
     /**
      * Returns maxlength.
@@ -127,7 +130,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @returns Max length.
      */
     get maxLength() {
-        const maxLength = this.getAttributeNS(null, 'maxlength');
+        const maxLength = this.getAttribute('maxlength');
         if (maxLength !== null) {
             return parseInt(maxLength);
         }
@@ -139,7 +142,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @param maxlength Max length.
      */
     set maxLength(maxLength) {
-        this.setAttributeNS(null, 'maxlength', String(maxLength));
+        this.setAttribute('maxlength', String(maxLength));
     }
     /**
      * Returns type.
@@ -147,7 +150,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @returns Type. Defaults to "text".
      */
     get type() {
-        return this.getAttributeNS(null, 'type') || 'text';
+        return this.getAttribute('type') || 'text';
     }
     /**
      * Sets type.
@@ -155,7 +158,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @param type Type.
      */
     set type(type) {
-        this.setAttributeNS(null, 'type', type.toLowerCase());
+        this.setAttribute('type', type.toLowerCase());
     }
     /**
      * Returns name.
@@ -163,7 +166,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @returns Name.
      */
     get name() {
-        return this.getAttributeNS(null, 'name') || '';
+        return this.getAttribute('name') || '';
     }
     /**
      * Sets name.
@@ -171,7 +174,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @param name Name.
      */
     set name(name) {
-        this.setAttributeNS(null, 'name', name);
+        this.setAttribute('name', name);
     }
     /**
      * Returns alt.
@@ -179,7 +182,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @returns Alt.
      */
     get alt() {
-        return this.getAttributeNS(null, 'alt') || '';
+        return this.getAttribute('alt') || '';
     }
     /**
      * Sets alt.
@@ -187,7 +190,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @param alt Alt.
      */
     set alt(alt) {
-        this.setAttributeNS(null, 'alt', alt);
+        this.setAttribute('alt', alt);
     }
     /**
      * Returns min.
@@ -195,7 +198,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @returns Min.
      */
     get min() {
-        return this.getAttributeNS(null, 'min') || '';
+        return this.getAttribute('min') || '';
     }
     /**
      * Sets min.
@@ -203,7 +206,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @param min Min.
      */
     set min(min) {
-        this.setAttributeNS(null, 'min', min);
+        this.setAttribute('min', min);
     }
     /**
      * Returns max.
@@ -211,7 +214,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @returns Max.
      */
     get max() {
-        return this.getAttributeNS(null, 'max') || '';
+        return this.getAttribute('max') || '';
     }
     /**
      * Sets max.
@@ -219,7 +222,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @param max Max.
      */
     set max(max) {
-        this.setAttributeNS(null, 'max', max);
+        this.setAttribute('max', max);
     }
     /**
      * Returns pattern.
@@ -227,7 +230,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @returns Pattern.
      */
     get pattern() {
-        return this.getAttributeNS(null, 'pattern') || '';
+        return this.getAttribute('pattern') || '';
     }
     /**
      * Sets pattern.
@@ -235,7 +238,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @param pattern Pattern.
      */
     set pattern(pattern) {
-        this.setAttributeNS(null, 'pattern', pattern);
+        this.setAttribute('pattern', pattern);
     }
     /**
      * Returns placeholder.
@@ -243,7 +246,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @returns Placeholder.
      */
     get placeholder() {
-        return this.getAttributeNS(null, 'placeholder') || '';
+        return this.getAttribute('placeholder') || '';
     }
     /**
      * Sets placeholder.
@@ -251,7 +254,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @param placeholder Placeholder.
      */
     set placeholder(placeholder) {
-        this.setAttributeNS(null, 'placeholder', placeholder);
+        this.setAttribute('placeholder', placeholder);
     }
     /**
      * Returns step.
@@ -259,7 +262,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @returns Step.
      */
     get step() {
-        return this.getAttributeNS(null, 'step') || '';
+        return this.getAttribute('step') || '';
     }
     /**
      * Sets step.
@@ -267,7 +270,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @param step Step.
      */
     set step(step) {
-        this.setAttributeNS(null, 'step', step);
+        this.setAttribute('step', step);
     }
     /**
      * Returns inputmode.
@@ -275,7 +278,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @returns Inputmode.
      */
     get inputmode() {
-        return this.getAttributeNS(null, 'inputmode') || '';
+        return this.getAttribute('inputmode') || '';
     }
     /**
      * Sets inputmode.
@@ -283,7 +286,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @param inputmode Inputmode.
      */
     set inputmode(inputmode) {
-        this.setAttributeNS(null, 'inputmode', inputmode);
+        this.setAttribute('inputmode', inputmode);
     }
     /**
      * Returns accept.
@@ -291,7 +294,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @returns Accept.
      */
     get accept() {
-        return this.getAttributeNS(null, 'accept') || '';
+        return this.getAttribute('accept') || '';
     }
     /**
      * Sets accept.
@@ -299,7 +302,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @param accept Accept.
      */
     set accept(accept) {
-        this.setAttributeNS(null, 'accept', accept);
+        this.setAttribute('accept', accept);
     }
     /**
      * Returns allowdirs.
@@ -307,7 +310,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @returns Allowdirs.
      */
     get allowdirs() {
-        return this.getAttributeNS(null, 'allowdirs') || '';
+        return this.getAttribute('allowdirs') || '';
     }
     /**
      * Sets allowdirs.
@@ -315,7 +318,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @param allowdirs Allowdirs.
      */
     set allowdirs(allowdirs) {
-        this.setAttributeNS(null, 'allowdirs', allowdirs);
+        this.setAttribute('allowdirs', allowdirs);
     }
     /**
      * Returns autocomplete.
@@ -323,7 +326,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @returns Autocomplete.
      */
     get autocomplete() {
-        return this.getAttributeNS(null, 'autocomplete') || '';
+        return this.getAttribute('autocomplete') || '';
     }
     /**
      * Sets autocomplete.
@@ -331,7 +334,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @param autocomplete Autocomplete.
      */
     set autocomplete(autocomplete) {
-        this.setAttributeNS(null, 'autocomplete', autocomplete);
+        this.setAttribute('autocomplete', autocomplete);
     }
     /**
      * Returns src.
@@ -339,7 +342,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @returns Src.
      */
     get src() {
-        return this.getAttributeNS(null, 'src') || '';
+        return this.getAttribute('src') || '';
     }
     /**
      * Sets src.
@@ -347,7 +350,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @param src Src.
      */
     set src(src) {
-        this.setAttributeNS(null, 'src', src);
+        this.setAttribute('src', src);
     }
     /**
      * Returns defaultValue.
@@ -355,7 +358,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @returns Defaultvalue.
      */
     get defaultValue() {
-        return this.getAttributeNS(null, 'defaultvalue') || '';
+        return this.getAttribute('value') || '';
     }
     /**
      * Sets defaultValue.
@@ -363,7 +366,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @param defaultValue Defaultvalue.
      */
     set defaultValue(defaultValue) {
-        this.setAttributeNS(null, 'defaultvalue', defaultValue);
+        this.setAttribute('value', defaultValue);
     }
     /**
      * Returns read only.
@@ -371,7 +374,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @returns Read only.
      */
     get readOnly() {
-        return this.getAttributeNS(null, 'readonly') !== null;
+        return this.getAttribute('readonly') !== null;
     }
     /**
      * Sets read only.
@@ -380,10 +383,10 @@ class HTMLInputElement extends HTMLElement_1.default {
      */
     set readOnly(readOnly) {
         if (!readOnly) {
-            this.removeAttributeNS(null, 'readonly');
+            this.removeAttribute('readonly');
         }
         else {
-            this.setAttributeNS(null, 'readonly', '');
+            this.setAttribute('readonly', '');
         }
     }
     /**
@@ -392,7 +395,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @returns Disabled.
      */
     get disabled() {
-        return this.getAttributeNS(null, 'disabled') !== null;
+        return this.getAttribute('disabled') !== null;
     }
     /**
      * Sets disabled.
@@ -401,10 +404,10 @@ class HTMLInputElement extends HTMLElement_1.default {
      */
     set disabled(disabled) {
         if (!disabled) {
-            this.removeAttributeNS(null, 'disabled');
+            this.removeAttribute('disabled');
         }
         else {
-            this.setAttributeNS(null, 'disabled', '');
+            this.setAttribute('disabled', '');
         }
     }
     /**
@@ -413,7 +416,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @returns Autofocus.
      */
     get autofocus() {
-        return this.getAttributeNS(null, 'autofocus') !== null;
+        return this.getAttribute('autofocus') !== null;
     }
     /**
      * Sets autofocus.
@@ -422,10 +425,10 @@ class HTMLInputElement extends HTMLElement_1.default {
      */
     set autofocus(autofocus) {
         if (!autofocus) {
-            this.removeAttributeNS(null, 'autofocus');
+            this.removeAttribute('autofocus');
         }
         else {
-            this.setAttributeNS(null, 'autofocus', '');
+            this.setAttribute('autofocus', '');
         }
     }
     /**
@@ -434,7 +437,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @returns Required.
      */
     get required() {
-        return this.getAttributeNS(null, 'required') !== null;
+        return this.getAttribute('required') !== null;
     }
     /**
      * Sets required.
@@ -443,10 +446,10 @@ class HTMLInputElement extends HTMLElement_1.default {
      */
     set required(required) {
         if (!required) {
-            this.removeAttributeNS(null, 'required');
+            this.removeAttribute('required');
         }
         else {
-            this.setAttributeNS(null, 'required', '');
+            this.setAttribute('required', '');
         }
     }
     /**
@@ -455,7 +458,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @returns Indeterminate.
      */
     get indeterminate() {
-        return this.getAttributeNS(null, 'indeterminate') !== null;
+        return this.getAttribute('indeterminate') !== null;
     }
     /**
      * Sets indeterminate.
@@ -464,10 +467,10 @@ class HTMLInputElement extends HTMLElement_1.default {
      */
     set indeterminate(indeterminate) {
         if (!indeterminate) {
-            this.removeAttributeNS(null, 'indeterminate');
+            this.removeAttribute('indeterminate');
         }
         else {
-            this.setAttributeNS(null, 'indeterminate', '');
+            this.setAttribute('indeterminate', '');
         }
     }
     /**
@@ -476,7 +479,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @returns Multiple.
      */
     get multiple() {
-        return this.getAttributeNS(null, 'multiple') !== null;
+        return this.getAttribute('multiple') !== null;
     }
     /**
      * Sets multiple.
@@ -485,10 +488,10 @@ class HTMLInputElement extends HTMLElement_1.default {
      */
     set multiple(multiple) {
         if (!multiple) {
-            this.removeAttributeNS(null, 'multiple');
+            this.removeAttribute('multiple');
         }
         else {
-            this.setAttributeNS(null, 'multiple', '');
+            this.setAttribute('multiple', '');
         }
     }
     /**
@@ -497,7 +500,10 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @returns Checked.
      */
     get checked() {
-        return this.getAttributeNS(null, 'checked') !== null;
+        if (this._checked !== null) {
+            return this._checked;
+        }
+        return this.getAttribute('checked') !== null;
     }
     /**
      * Sets checked.
@@ -505,11 +511,15 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @param checked Checked.
      */
     set checked(checked) {
-        if (!checked) {
-            this.removeAttributeNS(null, 'checked');
-        }
-        else {
-            this.setAttributeNS(null, 'checked', '');
+        this._checked = checked;
+        if (checked && this.type === 'radio' && this.name) {
+            const root = (this._formNode || this.getRootNode());
+            const radioButtons = root.querySelectorAll(`input[type="radio"][name="${this.name}"]`);
+            for (const radioButton of radioButtons) {
+                if (radioButton !== this) {
+                    radioButton['_checked'] = false;
+                }
+            }
         }
     }
     /**
@@ -524,16 +534,16 @@ class HTMLInputElement extends HTMLElement_1.default {
             case 'image':
             case 'reset':
             case 'button':
-                return this.getAttributeNS(null, 'value') || '';
+                return this.getAttribute('value') || '';
             case 'checkbox':
             case 'radio':
-                const attritube = this.getAttributeNS(null, 'value');
+                const attritube = this.getAttribute('value');
                 return attritube !== null ? attritube : 'on';
             case 'file':
                 return this.files.length > 0 ? '/fake/path/' + this.files[0].name : '';
         }
         if (this._value === null) {
-            return this.getAttributeNS(null, 'value') || '';
+            return this.getAttribute('value') || '';
         }
         return this._value;
     }
@@ -553,7 +563,7 @@ class HTMLInputElement extends HTMLElement_1.default {
             case 'button':
             case 'checkbox':
             case 'radio':
-                this.setAttributeNS(null, 'value', value);
+                this.setAttribute('value', value);
                 break;
             case 'file':
                 if (value !== '') {
@@ -644,24 +654,33 @@ class HTMLInputElement extends HTMLElement_1.default {
         this.setSelectionRange(this._selectionStart, this._selectionEnd, direction);
     }
     /**
-     * Returns the parent form element.
+     * Returns no validate.
      *
-     * @returns Form.
+     * @returns No validate.
      */
-    get form() {
-        let parent = this.parentNode;
-        while (parent && parent.tagName !== 'FORM') {
-            parent = parent.parentNode;
+    get formNoValidate() {
+        return this.getAttribute('formnovalidate') !== null;
+    }
+    /**
+     * Sets no validate.
+     *
+     * @param formNoValidate No validate.
+     */
+    set formNoValidate(formNoValidate) {
+        if (!formNoValidate) {
+            this.removeAttribute('formnovalidate');
+        }
+        else {
+            this.setAttribute('formnovalidate', '');
         }
-        return parent;
     }
     /**
-     * Returns validity state.
+     * Returns the parent form element.
      *
-     * @returns Validity state.
+     * @returns Form.
      */
-    get validity() {
-        return new ValidityState_1.default(this);
+    get form() {
+        return this._formNode;
     }
     /**
      * Returns "true" if it will validate.
@@ -692,12 +711,26 @@ class HTMLInputElement extends HTMLElement_1.default {
         return this.value ? parseFloat(this.value) : NaN;
     }
     /**
-     * Returns validation message.
+     * Returns the associated label elements.
      *
-     * @returns Validation message.
+     * @returns Label elements.
      */
-    get validationMessage() {
-        return this._validationMessage;
+    get labels() {
+        const id = this.id;
+        if (id) {
+            const rootNode = this.getRootNode();
+            const labels = rootNode.querySelectorAll(`label[for="${id}"]`);
+            let parent = this.parentNode;
+            while (parent) {
+                if (parent['tagName'] === 'LABEL') {
+                    labels.push(parent);
+                    break;
+                }
+                parent = parent.parentNode;
+            }
+            return labels;
+        }
+        return new NodeList_1.default();
     }
     /**
      * Sets validation message.
@@ -705,18 +738,7 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @param message Message.
      */
     setCustomValidity(message) {
-        this._validationMessage = String(message);
-    }
-    /**
-     * Reports validity by dispatching an "invalid" event.
-     */
-    reportValidity() {
-        if (this._validationMessage) {
-            this.dispatchEvent(new Event_1.default('invalid', {
-                bubbles: true,
-                cancelable: true
-            }));
-        }
+        this.validationMessage = String(message);
     }
     /**
      * Selects the text.
@@ -813,7 +835,24 @@ class HTMLInputElement extends HTMLElement_1.default {
      * @returns "true" if the field is valid.
      */
     checkValidity() {
-        return true;
+        const valid = this.disabled ||
+            this.readOnly ||
+            this.type === 'hidden' ||
+            this.type === 'reset' ||
+            this.type === 'button' ||
+            this.validity.valid;
+        if (!valid) {
+            this.dispatchEvent(new Event_1.default('invalid', { bubbles: true, cancelable: true }));
+        }
+        return valid;
+    }
+    /**
+     * Reports validity.
+     *
+     * @returns "true" if the field is valid.
+     */
+    reportValidity() {
+        return this.checkValidity();
     }
     /**
      * Steps up.
@@ -848,7 +887,6 @@ class HTMLInputElement extends HTMLElement_1.default {
         const clone = super.cloneNode(deep);
         clone.formAction = this.formAction;
         clone.formMethod = this.formMethod;
-        clone.formNoValidate = this.formNoValidate;
         clone._value = this._value;
         clone._height = this._height;
         clone._width = this._width;
@@ -860,22 +898,79 @@ class HTMLInputElement extends HTMLElement_1.default {
         return clone;
     }
     /**
-     * Checks if private value is supported.
-     *
-     * @returns "true" if private value is supported.
+     * @override
+     */
+    dispatchEvent(event) {
+        if (event.type === 'click' && this.disabled) {
+            return false;
+        }
+        const returnValue = super.dispatchEvent(event);
+        if (event.type === 'click' &&
+            this.isConnected &&
+            (!this.readOnly || this.type === 'checkbox' || this.type === 'radio')) {
+            if (this.type === 'checkbox' || this.type === 'radio') {
+                this.checked = this.type === 'checkbox' ? !this.checked : true;
+                this.dispatchEvent(new Event_1.default('input', { bubbles: true, cancelable: true }));
+                this.dispatchEvent(new Event_1.default('change', { bubbles: true, cancelable: true }));
+            }
+            else if (this.type === 'submit') {
+                const form = this._formNode;
+                if (form) {
+                    form.requestSubmit();
+                }
+            }
+            else if (this.type === 'reset') {
+                const form = this._formNode;
+                if (form) {
+                    form.reset();
+                }
+            }
+        }
+        return returnValue;
+    }
+    /**
+     * @override
      */
-    // Private _isPrivateValueSupported(): boolean {
-    // 	Return (
-    // 		This.type !== 'hidden' &&
-    // 		This.type !== 'submit' &&
-    // 		This.type !== 'image' &&
-    // 		This.type !== 'reset' &&
-    // 		This.type !== 'button' &&
-    // 		This.type !== 'checkbox' &&
-    // 		This.type !== 'radio' &&
-    // 		This.type !== 'file'
-    // 	);
-    // }
+    setAttributeNode(attribute) {
+        const replacedAttribute = super.setAttributeNode(attribute);
+        const oldValue = replacedAttribute ? replacedAttribute.value : null;
+        if ((attribute.name === 'id' || attribute.name === 'name') && this._formNode) {
+            if (oldValue) {
+                this._formNode._removeFormControlItem(this, oldValue);
+            }
+            if (attribute.value) {
+                this._formNode._appendFormControlItem(this, attribute.value);
+            }
+        }
+        return replacedAttribute;
+    }
+    /**
+     * @override
+     */
+    removeAttributeNode(attribute) {
+        super.removeAttributeNode(attribute);
+        if ((attribute.name === 'id' || attribute.name === 'name') && this._formNode) {
+            this._formNode._removeFormControlItem(this, attribute.value);
+        }
+        return attribute;
+    }
+    /**
+     * @override
+     */
+    _connectToNode(parentNode = null) {
+        const oldFormNode = this._formNode;
+        super._connectToNode(parentNode);
+        if (oldFormNode !== this._formNode) {
+            if (oldFormNode) {
+                oldFormNode._removeFormControlItem(this, this.name);
+                oldFormNode._removeFormControlItem(this, this.id);
+            }
+            if (this._formNode) {
+                this._formNode._appendFormControlItem(this, this.name);
+                this._formNode._appendFormControlItem(this, this.id);
+            }
+        }
+    }
     /**
      * Checks is selection is supported.
      *