From 099501014bf2a4fab808eb44316bdc1a28865070 Mon Sep 17 00:00:00 2001
From: damyanpetev <damyanpetev@users.noreply.github.com>
Date: Thu, 12 Nov 2026 15:23:09 +0200
Subject: [PATCH 1/3] fix(button): resolve commandfor only when connected

---
 CHANGELOG.md                         |  1 +
 src/components/button/button-base.ts | 13 +++++++++-
 src/components/button/button.spec.ts | 37 ++++++++++++++++++++++++++++
 3 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 31e5ba4ef..bb7bf01d7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -164,6 +164,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
   - A button with `href` now keeps the link role of its anchor. Before, the anchor had `role="button"`, so screen readers announced a link as a button. [#2421](https://github.com/IgniteUI/igniteui-webcomponents/pull/2421)
   - A disabled link now renders a disabled native `<button>` with `role="link"` in place of the anchor. So it leaves the tab order, cannot navigate and dispatches no click. Before, the link stayed in the tab order, and `Enter` still followed it. While the link is disabled, the `base` part is the `<button>`. [#2421](https://github.com/IgniteUI/igniteui-webcomponents/pull/2421)
   - The form action of a `submit` or `reset` button now runs after the `click` listeners, as for a native button. A listener that cancels the click, or that disables the button, stops the submit or the reset. Before, the button submitted or reset the form before the listeners on the button ran, so they could not stop it.
+  - Setting `commandfor` on a detached button no longer throws `getElementById is not a function`. A change made while detached now also applies once the button is attached again.
 - #### Button group, Stepper
   - The arrow keys that the orientation does not use are no longer canceled, so the page can scroll with them. Before, a horizontal group or stepper canceled Up and Down, and a vertical group canceled Left and Right.
 - #### Calendar
diff --git a/src/components/button/button-base.ts b/src/components/button/button-base.ts
index 69e23d647..138ed2d54 100644
--- a/src/components/button/button-base.ts
+++ b/src/components/button/button-base.ts
@@ -171,7 +171,10 @@ export abstract class IgcButtonBaseComponent extends EventEmitterMixin<IgcButton
     this._commandfor = value;
     if (value) {
       this._resolver.observe();
-      this._commandForElement = getElementByIdFromRoot(this, value);
+      // detached element has no root to call `getElementById` on until `connectedCallback`
+      this._commandForElement = this.isConnected
+        ? getElementByIdFromRoot(this, value)
+        : null;
     } else {
       this._commandForElement = null;
       this._resolver.unobserve();
@@ -220,6 +223,14 @@ export abstract class IgcButtonBaseComponent extends EventEmitterMixin<IgcButton
     trackLabels(this);
   }
 
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    // resolve `commandfor` in case it was set or changed while disconnected:
+    if (this._commandfor) {
+      this._resolveCommandFor();
+    }
+  }
+
   protected override firstUpdated(): void {
     this.updateComplete.then(() => {
       if (this._commandfor) {
diff --git a/src/components/button/button.spec.ts b/src/components/button/button.spec.ts
index 2491b31b2..18c44ceb0 100644
--- a/src/components/button/button.spec.ts
+++ b/src/components/button/button.spec.ts
@@ -442,6 +442,43 @@ describe('Button tests', () => {
 
         expect(button.commandForElement).to.be.null;
       });
+
+      it('resolves commandfor set before the button is inserted', async () => {
+        const container = await fixture<HTMLElement>(html`
+          <div><div id="detached-target" popover></div></div>
+        `);
+        const target = container.querySelector('#detached-target');
+
+        // set attributes on element before inserting it as some frameworks do:
+        button = document.createElement(IgcButtonComponent.tagName);
+        button.setAttribute('commandfor', 'detached-target');
+        expect(button.commandForElement).to.be.null;
+
+        container.appendChild(button);
+        await elementUpdated(button);
+
+        expect(button.commandForElement).to.equal(target);
+      });
+
+      it('resolves a commandfor changed while the button was detached', async () => {
+        const container = await fixture<HTMLElement>(html`
+          <div>
+            <igc-button commandfor="first-target">Click</igc-button>
+            <div id="first-target" popover></div>
+            <div id="second-target" popover></div>
+          </div>
+        `);
+
+        button = container.querySelector<IgcButtonComponent>('igc-button')!;
+        const second = container.querySelector('#second-target');
+
+        button.remove();
+        button.commandfor = 'second-target';
+        container.appendChild(button);
+        await elementUpdated(button);
+
+        expect(button.commandForElement).to.equal(second);
+      });
     });
 
     describe('Popover control', () => {

From 6cf351b473229094e00c562944dd1ed81c7fe641 Mon Sep 17 00:00:00 2001
From: damyanpetev <damyanpetev@users.noreply.github.com>
Date: Thu, 12 Nov 2026 15:27:55 +0200
Subject: [PATCH 2/3] docs(changelog): link #2592

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bb7bf01d7..7e0895c31 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -164,7 +164,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
   - A button with `href` now keeps the link role of its anchor. Before, the anchor had `role="button"`, so screen readers announced a link as a button. [#2421](https://github.com/IgniteUI/igniteui-webcomponents/pull/2421)
   - A disabled link now renders a disabled native `<button>` with `role="link"` in place of the anchor. So it leaves the tab order, cannot navigate and dispatches no click. Before, the link stayed in the tab order, and `Enter` still followed it. While the link is disabled, the `base` part is the `<button>`. [#2421](https://github.com/IgniteUI/igniteui-webcomponents/pull/2421)
   - The form action of a `submit` or `reset` button now runs after the `click` listeners, as for a native button. A listener that cancels the click, or that disables the button, stops the submit or the reset. Before, the button submitted or reset the form before the listeners on the button ran, so they could not stop it.
-  - Setting `commandfor` on a detached button no longer throws `getElementById is not a function`. A change made while detached now also applies once the button is attached again.
+  - Setting `commandfor` on a detached button no longer throws `getElementById is not a function`. A change made while detached now also applies once the button is attached again. [#2592](https://github.com/IgniteUI/igniteui-webcomponents/pull/2592)
 - #### Button group, Stepper
   - The arrow keys that the orientation does not use are no longer canceled, so the page can scroll with them. Before, a horizontal group or stepper canceled Up and Down, and a vertical group canceled Left and Right.
 - #### Calendar

From ef3537ceaf53ec2ad963089721d08d0e1477aa9a Mon Sep 17 00:00:00 2001
From: damyanpetev <damyanpetev@users.noreply.github.com>
Date: Thu, 12 Nov 2026 15:41:16 +0200
Subject: [PATCH 3/3] docs(button): document commandfor set while detached

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/button/spec.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/button/spec.md b/src/components/button/spec.md
index 0d4be37ac..a98db793d 100644
--- a/src/components/button/spec.md
+++ b/src/components/button/spec.md
@@ -55,6 +55,7 @@
 |       9 | 2026-10-29 | Transition only the properties that change, so the button and a slotted icon hide at the same time as a hidden ancestor |
 |      10 | 2026-11-02 | A `focus()` call before the first render applies after the render; `focus()` and `blur()` in the API                    |
 |      11 | 2026-11-11 | The form action runs after the click listeners, so a listener can cancel it; the button is the default button for <kbd>Enter</kbd> in a field |
+|      12 | 2026-11-12 | A `commandfor` set or changed while the button is detached resolves once it is attached |
 
 ## Overview
 
@@ -173,7 +174,7 @@ form action to the next task.
 to do with it. The built-in commands operate a native popover and a native `dialog`; the components of the library
 accept `--show`, `--hide` and `--toggle`. A custom command starts with two dashes.
 `commandForElement` resolves the target, accepts an element reference, and picks up a target appended after the
-first render.
+first render. A `commandfor` set or changed while the button is detached resolves once it is attached.
 
 ```html
 <igc-button command="--toggle" commandfor="drawer">Toggle</igc-button>
@@ -303,7 +304,8 @@ button has no `name` and no `mirrored`. Slotted content takes the size of the ic
 
 10. The `command` attribute is reflected onto the native button and follows a change of the property.
 11. `commandForElement` resolves from a string id and accepts an element reference, and `commandfor` resolves a
-    target appended after the first render.
+    target appended after the first render. A `commandfor` set before the button is attached, or changed while it
+    is detached, resolves once it is attached.
 12. A native popover is shown, hidden and toggled on repeated clicks.
 13. A native dialog is opened as modal and closed.