input-num disabled: extra work

I still prefer to set pointer-events to none for the <svg> and only set it to anything else for invisible event <rect>s.
sidewayss · Dec 1, 2024 · 52f3105 · 52f3105
1 parent 34f0f33
commit 52f3105
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/base-element.js b/base-element.js
@@ -1,4 +1,4 @@
-export {VALUE, BaseElement};
+export {DISABLED, VALUE, BaseElement};
 const
 DISABLED  = "disabled", // DOM attributes
 TAB_INDEX = "tabindex",
@@ -79,7 +79,7 @@ class BaseElement extends HTMLElement {
     }
 // getters/setters reflect the HTML attributes, see attributeChangedCallback()
     get disabled()    { return this.hasAttribute(DISABLED); }
-    set disabled(val) { this._setBool(DISABLED, val); }
+    set disabled(val) { this.toggleAttribute(DISABLED, val); }
 
 // define wraps customElements.define for consistency of class and tag names
     static define(cls) {

diff --git a/input-num.js b/input-num.js
@@ -1,6 +1,6 @@
 export {InputNum};
 
-import {VALUE, BaseElement} from "./base-element.js";
+import {DISABLED, VALUE, BaseElement} from "./base-element.js";
 const
 MAX   = "max",          // DOM attributes:
 MIN   = "min",
@@ -256,6 +256,9 @@ static observedAttributes = [
                 case NOTATION:      // convert null to undefined
                     this.#locale[name] = val ?? undefined;
                     break;
+                case DISABLED:      // falls through
+                    for (const elm of this.#btns)
+                        elm.style.pointerEvents = val ? "none" : "";
                 default:            // handled by BaseElement
                     super.attributeChangedCallback(name, _, val);
                     return;