From 6f87f53ab270a5ef7c1d35787214f0c43440f738 Mon Sep 17 00:00:00 2001
From: chirokas <157580465+chirokas@users.noreply.github.com>
Date: Sun, 12 Apr 2026 13:13:10 +0000
Subject: [PATCH 1/4] Fix and update attribute-behavior fixture

---
 fixtures/attribute-behavior/.gitignore        |   2 +
 .../AttributeTableSnapshot.md                 |  38 +++---
 fixtures/attribute-behavior/README.md         |   2 +-
 fixtures/attribute-behavior/package.json      |   2 +-
 fixtures/attribute-behavior/public/index.html |   1 +
 fixtures/attribute-behavior/src/App.js        | 111 ++++++++++++++----
 6 files changed, 115 insertions(+), 41 deletions(-)

diff --git a/fixtures/attribute-behavior/.gitignore b/fixtures/attribute-behavior/.gitignore
index 49c5a75db940..f5917ef02547 100644
--- a/fixtures/attribute-behavior/.gitignore
+++ b/fixtures/attribute-behavior/.gitignore
@@ -11,6 +11,8 @@
 /public/react.development.js
 /public/react-dom.development.js
 /public/react-dom-server.browser.development.js
+/public/react-dom-client.development.js
+/public/scheduler.development.js
 
 # misc
 .DS_Store
diff --git a/fixtures/attribute-behavior/AttributeTableSnapshot.md b/fixtures/attribute-behavior/AttributeTableSnapshot.md
index 004a35db8d40..d3672769d828 100644
--- a/fixtures/attribute-behavior/AttributeTableSnapshot.md
+++ b/fixtures/attribute-behavior/AttributeTableSnapshot.md
@@ -1,4 +1,4 @@
-## `about` (on `<div>` inside `<div>`)
+## `about` (on `<div>` inside `<div>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
 | `about=(string)`| (changed)| `"a string"` |
@@ -751,27 +751,27 @@
 ## `async` (on `<script>` inside `<div>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `async=(string)`| (changed)| `<boolean: true>` |
-| `async=(empty string)`| (initial)| `<boolean: false>` |
-| `async=(array with string)`| (changed)| `<boolean: true>` |
-| `async=(empty array)`| (changed)| `<boolean: true>` |
-| `async=(object)`| (changed)| `<boolean: true>` |
-| `async=(numeric string)`| (changed)| `<boolean: true>` |
-| `async=(-1)`| (changed)| `<boolean: true>` |
-| `async=(0)`| (initial)| `<boolean: false>` |
-| `async=(integer)`| (changed)| `<boolean: true>` |
+| `async=(string)`| (changed, warning, ssr warning)| `<boolean: true>` |
+| `async=(empty string)`| (initial, warning, ssr warning)| `<boolean: false>` |
+| `async=(array with string)`| (changed, warning, ssr warning)| `<boolean: true>` |
+| `async=(empty array)`| (changed, warning, ssr warning)| `<boolean: true>` |
+| `async=(object)`| (changed, warning, ssr warning)| `<boolean: true>` |
+| `async=(numeric string)`| (changed, warning, ssr warning)| `<boolean: true>` |
+| `async=(-1)`| (changed, warning, ssr warning)| `<boolean: true>` |
+| `async=(0)`| (initial, warning, ssr warning)| `<boolean: false>` |
+| `async=(integer)`| (changed, warning, ssr warning)| `<boolean: true>` |
 | `async=(NaN)`| (initial, warning)| `<boolean: false>` |
-| `async=(float)`| (changed)| `<boolean: true>` |
-| `async=(true)`| (changed)| `<boolean: true>` |
-| `async=(false)`| (initial)| `<boolean: false>` |
+| `async=(float)`| (changed, warning, ssr warning)| `<boolean: true>` |
+| `async=(true)`| (changed, warning, ssr warning)| `<boolean: true>` |
+| `async=(false)`| (initial, warning, ssr warning)| `<boolean: false>` |
 | `async=(string 'true')`| (changed, warning)| `<boolean: true>` |
 | `async=(string 'false')`| (changed, warning)| `<boolean: true>` |
-| `async=(string 'on')`| (changed)| `<boolean: true>` |
-| `async=(string 'off')`| (changed)| `<boolean: true>` |
+| `async=(string 'on')`| (changed, warning, ssr warning)| `<boolean: true>` |
+| `async=(string 'off')`| (changed, warning, ssr warning)| `<boolean: true>` |
 | `async=(symbol)`| (initial, warning)| `<boolean: false>` |
 | `async=(function)`| (initial, warning)| `<boolean: false>` |
-| `async=(null)`| (initial)| `<boolean: false>` |
-| `async=(undefined)`| (initial)| `<boolean: false>` |
+| `async=(null)`| (initial, warning, ssr warning)| `<boolean: false>` |
+| `async=(undefined)`| (initial, warning, ssr warning)| `<boolean: false>` |
 
 ## `attributeName` (on `<animate>` inside `<svg>`)
 | Test Case | Flags | Result |
@@ -1493,7 +1493,7 @@
 | `children=(string 'false')`| (initial)| `[]` |
 | `children=(string 'on')`| (initial)| `[]` |
 | `children=(string 'off')`| (initial)| `[]` |
-| `children=(symbol)`| (initial)| `[]` |
+| `children=(symbol)`| (initial, warning)| `[]` |
 | `children=(function)`| (initial, warning)| `[]` |
 | `children=(null)`| (initial)| `[]` |
 | `children=(undefined)`| (initial)| `[]` |
@@ -10143,7 +10143,7 @@
 | `srcSet=(string 'false')`| (initial)| `<undefined>` |
 | `srcSet=(string 'on')`| (initial)| `<undefined>` |
 | `srcSet=(string 'off')`| (initial)| `<undefined>` |
-| `srcSet=(symbol)`| (initial, warning)| `<undefined>` |
+| `srcSet=(symbol)`| (changed, error, warning, ssr mismatch)| `` |
 | `srcSet=(function)`| (initial, warning)| `<undefined>` |
 | `srcSet=(null)`| (initial)| `<undefined>` |
 | `srcSet=(undefined)`| (initial)| `<undefined>` |
diff --git a/fixtures/attribute-behavior/README.md b/fixtures/attribute-behavior/README.md
index 9a5ec79bce46..9bdf66ab8bf8 100644
--- a/fixtures/attribute-behavior/README.md
+++ b/fixtures/attribute-behavior/README.md
@@ -8,7 +8,7 @@
 
 ## Instructions
 
-`yarn build --type=UMD_DEV react/index,react-dom && cd fixtures/attribute-behavior && yarn install && yarn dev`
+`yarn build --type=NODE_DEV react/index,react-dom,scheduler && cd fixtures/attribute-behavior && yarn install && yarn dev`
 
 ## Interpretation
 
diff --git a/fixtures/attribute-behavior/package.json b/fixtures/attribute-behavior/package.json
index 345fd34a8d9f..28cffc046034 100644
--- a/fixtures/attribute-behavior/package.json
+++ b/fixtures/attribute-behavior/package.json
@@ -15,7 +15,7 @@
   },
   "scripts": {
     "predev":
-      "cp ../../build/oss-experimental/react/umd/react.development.js public/ && cp ../../build/oss-experimental/react-dom/umd/react-dom.development.js public/ && cp ../../build/oss-experimental/react-dom/umd/react-dom-server.browser.development.js public/",
+      "cp ../../build/oss-experimental/react/cjs/react.development.js public/ && cp ../../build/oss-experimental/react-dom/cjs/react-dom.development.js public/ && cp ../../build/oss-experimental/react-dom/cjs/react-dom-client.development.js public/ && cp ../../build/oss-experimental/react-dom/cjs/react-dom-server.browser.development.js public/ && cp ../../build/oss-experimental/scheduler/cjs/scheduler.development.js public/",
     "dev": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
diff --git a/fixtures/attribute-behavior/public/index.html b/fixtures/attribute-behavior/public/index.html
index 9bfa8e8098e0..916182b68e1a 100644
--- a/fixtures/attribute-behavior/public/index.html
+++ b/fixtures/attribute-behavior/public/index.html
@@ -20,6 +20,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+    <script src="https://unpkg.com/requirejs@latest/require.js" crossorigin="anonymous" async></script>
   </head>
   <body>
     <noscript>
diff --git a/fixtures/attribute-behavior/src/App.js b/fixtures/attribute-behavior/src/App.js
index ad6e863e1fa0..5534f7cf2bfb 100644
--- a/fixtures/attribute-behavior/src/App.js
+++ b/fixtures/attribute-behavior/src/App.js
@@ -241,12 +241,15 @@ const UNKNOWN_HTML_TAGS = new Set(['keygen', 'time', 'command']);
 async function getRenderedAttributeValue(
   react,
   renderer,
+  clientRenderer,
   serverRenderer,
   attribute,
   type
 ) {
   const originalConsoleError = console.error;
   console.error = warn;
+  const originalConsoleWarn = console.warn;
+  console.warn = warn;
 
   const containerTagName = attribute.containerTagName || 'div';
   const tagName = attribute.tagName || 'div';
@@ -303,7 +306,7 @@ async function getRenderedAttributeValue(
   try {
     let container = createContainer();
     renderer.flushSync(() => {
-      renderer
+      clientRenderer
         .createRoot(container)
         .render(react.createElement(tagName, baseProps));
     });
@@ -313,7 +316,7 @@ async function getRenderedAttributeValue(
     container = createContainer();
 
     renderer.flushSync(() => {
-      renderer
+      clientRenderer
         .createRoot(container)
         .render(react.createElement(tagName, props));
     });
@@ -386,6 +389,7 @@ async function getRenderedAttributeValue(
   }
 
   console.error = originalConsoleError;
+  console.warn = originalConsoleWarn;
 
   if (hasTagMismatch) {
     throw new Error('Tag mismatch. Expected: ' + tagName);
@@ -433,14 +437,17 @@ async function prepareState(initGlobals) {
     const {
       ReactStable,
       ReactDOMStable,
+      ReactDOMClientStable,
       ReactDOMServerStable,
       ReactNext,
       ReactDOMNext,
+      ReactDOMClientNext,
       ReactDOMServerNext,
-    } = initGlobals(attribute, type);
+    } = await initGlobals(attribute, type);
     const reactStableValue = await getRenderedAttributeValue(
       ReactStable,
       ReactDOMStable,
+      ReactDOMClientStable,
       ReactDOMServerStable,
       attribute,
       type
@@ -448,6 +455,7 @@ async function prepareState(initGlobals) {
     const reactNextValue = await getRenderedAttributeValue(
       ReactNext,
       ReactDOMNext,
+      ReactDOMClientNext,
       ReactDOMServerNext,
       attribute,
       type
@@ -799,23 +807,69 @@ class App extends React.Component {
   };
 
   async componentDidMount() {
-    const sources = {
-      ReactStable: 'https://unpkg.com/react@latest/umd/react.development.js',
-      ReactDOMStable:
-        'https://unpkg.com/react-dom@latest/umd/react-dom.development.js',
-      ReactDOMServerStable:
-        'https://unpkg.com/react-dom@latest/umd/react-dom-server.browser.development.js',
-      ReactNext: '/react.development.js',
-      ReactDOMNext: '/react-dom.development.js',
-      ReactDOMServerNext: '/react-dom-server.browser.development.js',
-    };
-    const codePromises = Object.values(sources).map(src =>
-      fetch(src).then(res => res.text())
+    /**
+     * @type (readonly {namespace: string; specifier: string; url: string}[])
+     */
+    const sources = [
+      {
+        namespace: 'SchedulerStable',
+        specifier: 'scheduler',
+        url: 'https://unpkg.com/scheduler@latest/cjs/scheduler.development.js',
+      },
+      {
+        namespace: 'ReactStable',
+        specifier: 'react',
+        url: 'https://unpkg.com/react@latest/cjs/react.development.js',
+      },
+      {
+        namespace: 'ReactDOMStable',
+        specifier: 'react-dom',
+        url: 'https://unpkg.com/react-dom@latest/cjs/react-dom.development.js',
+      },
+      {
+        namespace: 'ReactDOMClientStable',
+        specifier: 'react-dom/client',
+        url: 'https://unpkg.com/react-dom@latest/cjs/react-dom-client.development.js',
+      },
+      {
+        namespace: 'ReactDOMServerStable',
+        specifier: 'react-dom/server',
+        url: 'https://unpkg.com/react-dom@latest/cjs/react-dom-server.browser.development.js',
+      },
+      {
+        namespace: 'SchedulerNext',
+        specifier: 'scheduler',
+        url: '/scheduler.development.js',
+      },
+      {
+        namespace: 'ReactNext',
+        specifier: 'react',
+        url: '/react.development.js',
+      },
+      {
+        namespace: 'ReactDOMNext',
+        specifier: 'react-dom',
+        url: '/react-dom.development.js',
+      },
+      {
+        namespace: 'ReactDOMClientNext',
+        specifier: 'react-dom/client',
+        url: '/react-dom-client.development.js',
+      },
+      {
+        namespace: 'ReactDOMServerNext',
+        specifier: 'react-dom/server',
+        url: '/react-dom-server.browser.development.js',
+      },
+    ];
+
+    const codePromises = sources.map(({url}) =>
+      fetch(url).then(res => res.text())
     );
     const codesByIndex = await Promise.all(codePromises);
 
     const pool = [];
-    function initGlobals(attribute, type) {
+    async function initGlobals(attribute, type) {
       if (useFastMode) {
         // Note: this is not giving correct results for warnings.
         // But it's much faster.
@@ -838,10 +892,27 @@ class App extends React.Component {
       }
 
       let globals = {};
-      Object.keys(sources).forEach((name, i) => {
-        eval.call(window, codesByIndex[i]); // eslint-disable-line
-        globals[name] = window[name.replace(/Stable|Next/g, '')];
-      });
+
+      for (let i = 0; i < sources.length; i++) {
+        const {namespace, specifier} = sources[i];
+        const code = codesByIndex[i].replaceAll(
+          'process.env.NODE_ENV',
+          '"development"'
+        );
+
+        window.requirejs.undef(specifier);
+        // eslint-disable-next-line no-eval
+        eval.call(
+          window,
+          `window.define("${specifier}", function (require, exports, module) {${code}});`
+        );
+
+        await new Promise(resolve => {
+          window.require([specifier], resolve);
+        }).then(module => {
+          globals[namespace] = module;
+        });
+      }
 
       // Cache for future use (for different attributes).
       pool.push({

From 8e1391f993ba24bcc066bc3efc3321610c2e28c0 Mon Sep 17 00:00:00 2001
From: chirokas <157580465+chirokas@users.noreply.github.com>
Date: Sun, 12 Apr 2026 13:19:47 +0000
Subject: [PATCH 2/4] Current behavior

---
 fixtures/attribute-behavior/src/attributes.js | 15 ++++++
 .../__tests__/DOMPropertyOperations-test.js   | 28 +++++++++++
 .../ReactDOMEventPropagation-test.js          | 16 +++++++
 .../__tests__/SimpleEventPlugin-test.js       | 47 +++++++++++++++++++
 4 files changed, 106 insertions(+)

diff --git a/fixtures/attribute-behavior/src/attributes.js b/fixtures/attribute-behavior/src/attributes.js
index 9427cf169983..2a8cc9ca0c65 100644
--- a/fixtures/attribute-behavior/src/attributes.js
+++ b/fixtures/attribute-behavior/src/attributes.js
@@ -357,6 +357,21 @@ const attributes = [
   },
   {name: 'cols', tagName: 'textarea'},
   {name: 'colSpan', containerTagName: 'tr', tagName: 'td'},
+  {name: 'command', overrideStringValue: 'show-popover', tagName: 'button'},
+  {
+    name: 'commandFor',
+    read: element => {
+      document.body.appendChild(element);
+      try {
+        // trigger and target need to be connected for `commandForElement` to read the actual value.
+        return element.commandForElement;
+      } finally {
+        document.body.removeChild(element);
+      }
+    },
+    overrideStringValue: 'popover-target',
+    tagName: 'button',
+  },
   {name: 'content', containerTagName: 'head', tagName: 'meta'},
   {name: 'contentEditable'},
   {
diff --git a/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js b/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
index ef09e49bf36c..350e33ace30a 100644
--- a/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
+++ b/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
@@ -1346,6 +1346,34 @@ describe('DOMPropertyOperations', () => {
         );
       });
     });
+
+    it('warns when using commandFor={HTMLElement}', async () => {
+      const invokee = document.createElement('div');
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+
+      await act(() => {
+        root.render(
+          <button key="one" commandFor={invokee}>
+            Toggle popover
+          </button>,
+        );
+      });
+
+      assertConsoleErrorDev([
+        'The `commandFor` prop expects the ID of an Element as a string. Received HTMLDivElement {} instead.\n' +
+          '    in button (at **)',
+      ]);
+
+      // Dedupe warning
+      await act(() => {
+        root.render(
+          <button key="two" commandFor={invokee}>
+            Toggle popover
+          </button>,
+        );
+      });
+    });
   });
 
   describe('deleteValueForProperty', () => {
diff --git a/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js b/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
index 752c8bba961b..f8f44bdf93b9 100644
--- a/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
@@ -1434,6 +1434,22 @@ describe('ReactDOMEventListener', () => {
         },
       });
     });
+
+    it('onCommand', async () => {
+      await testNonBubblingEvent({
+        type: 'div',
+        reactEvent: 'onCommand',
+        reactEventType: 'command',
+        nativeEvent: 'command',
+        dispatch(node) {
+          const e = new Event('command', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
   });
 
   // The tests for these events are currently very limited
diff --git a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
index f14fcab168b9..8872adf300b4 100644
--- a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
+++ b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
@@ -18,6 +18,14 @@ class ToggleEvent extends Event {
   }
 }
 
+class CommandEvent extends Event {
+  constructor(type, eventInit) {
+    super(type, eventInit);
+    this.command = eventInit.command;
+    this.source = eventInit.source;
+  }
+}
+
 describe('SimpleEventPlugin', function () {
   let React;
   let ReactDOMClient;
@@ -592,6 +600,45 @@ describe('SimpleEventPlugin', function () {
     });
   });
 
+  it('dispatches synthetic command events when the Invoker Commands API is used', async () => {
+    container = document.createElement('div');
+
+    const onCommand = jest.fn();
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(
+        <>
+          <button command="toggle-popover" commandFor="popover">
+            Toggle popover
+          </button>
+          <div id="invokee" popover="" onCommand={onCommand}>
+            popover content
+          </div>
+        </>,
+      );
+    });
+
+    const invokee = container.querySelector('#invokee');
+    const invoker = container.querySelector('button');
+    invokee.dispatchEvent(
+      new CommandEvent('command', {
+        bubbles: false,
+        cancelable: true,
+        command: 'toggle-popover',
+        source: invoker,
+      }),
+    );
+
+    expect(onCommand).toHaveBeenCalledTimes(1);
+    const event = onCommand.mock.calls[0][0];
+    expect(event).toEqual(
+      expect.objectContaining({
+        command: 'toggle-popover',
+        source: invoker,
+      }),
+    );
+  });
+
   it('includes the submitter in submit events', async function () {
     container = document.createElement('div');
 

From 0c507fe0425c1bd6d34984c9eef0dcfeba046ca7 Mon Sep 17 00:00:00 2001
From: chirokas <157580465+chirokas@users.noreply.github.com>
Date: Sun, 12 Apr 2026 13:50:38 +0000
Subject: [PATCH 3/4] [react-dom]: Add support for Invoker Commands API

---
 .../AttributeTableSnapshot.md                 | 50 ++++++++++++++++
 .../src/client/ReactDOMComponent.js           | 58 +++++++++++++++----
 .../src/events/DOMEventNames.js               |  1 +
 .../src/events/DOMEventProperties.js          |  1 +
 .../src/events/DOMPluginEventSystem.js        |  1 +
 .../src/events/ReactDOMEventListener.js       |  1 +
 .../src/events/SyntheticEvent.js              |  9 +++
 .../src/events/plugins/SimpleEventPlugin.js   |  8 ++-
 .../src/shared/possibleStandardNames.js       |  2 +
 9 files changed, 120 insertions(+), 11 deletions(-)

diff --git a/fixtures/attribute-behavior/AttributeTableSnapshot.md b/fixtures/attribute-behavior/AttributeTableSnapshot.md
index d3672769d828..8823163243b5 100644
--- a/fixtures/attribute-behavior/AttributeTableSnapshot.md
+++ b/fixtures/attribute-behavior/AttributeTableSnapshot.md
@@ -2023,6 +2023,56 @@
 | `colSpan=(null)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
 | `colSpan=(undefined)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
 
+## `command` (on `<button>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `command=(string)`| (changed)| `"show-popover"` |
+| `command=(empty string)`| (initial)| `<empty string>` |
+| `command=(array with string)`| (changed)| `"show-popover"` |
+| `command=(empty array)`| (initial)| `<empty string>` |
+| `command=(object)`| (initial)| `<empty string>` |
+| `command=(numeric string)`| (initial)| `<empty string>` |
+| `command=(-1)`| (initial)| `<empty string>` |
+| `command=(0)`| (initial)| `<empty string>` |
+| `command=(integer)`| (initial)| `<empty string>` |
+| `command=(NaN)`| (initial, warning)| `<empty string>` |
+| `command=(float)`| (initial)| `<empty string>` |
+| `command=(true)`| (initial, warning)| `<empty string>` |
+| `command=(false)`| (initial, warning)| `<empty string>` |
+| `command=(string 'true')`| (initial)| `<empty string>` |
+| `command=(string 'false')`| (initial)| `<empty string>` |
+| `command=(string 'on')`| (initial)| `<empty string>` |
+| `command=(string 'off')`| (initial)| `<empty string>` |
+| `command=(symbol)`| (initial, warning)| `<empty string>` |
+| `command=(function)`| (initial, warning)| `<empty string>` |
+| `command=(null)`| (initial)| `<empty string>` |
+| `command=(undefined)`| (initial)| `<empty string>` |
+
+## `commandFor` (on `<button>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `commandFor=(string)`| (changed)| `<HTMLDivElement>` |
+| `commandFor=(empty string)`| (initial)| `<null>` |
+| `commandFor=(array with string)`| (changed, warning, ssr warning)| `<HTMLDivElement>` |
+| `commandFor=(empty array)`| (initial, warning, ssr warning)| `<null>` |
+| `commandFor=(object)`| (initial, warning, ssr warning)| `<null>` |
+| `commandFor=(numeric string)`| (initial)| `<null>` |
+| `commandFor=(-1)`| (initial)| `<null>` |
+| `commandFor=(0)`| (initial)| `<null>` |
+| `commandFor=(integer)`| (initial)| `<null>` |
+| `commandFor=(NaN)`| (initial, warning)| `<null>` |
+| `commandFor=(float)`| (initial)| `<null>` |
+| `commandFor=(true)`| (initial, warning)| `<null>` |
+| `commandFor=(false)`| (initial, warning)| `<null>` |
+| `commandFor=(string 'true')`| (initial)| `<null>` |
+| `commandFor=(string 'false')`| (initial)| `<null>` |
+| `commandFor=(string 'on')`| (initial)| `<null>` |
+| `commandFor=(string 'off')`| (initial)| `<null>` |
+| `commandFor=(symbol)`| (initial, warning)| `<null>` |
+| `commandFor=(function)`| (initial, warning)| `<null>` |
+| `commandFor=(null)`| (initial)| `<null>` |
+| `commandFor=(undefined)`| (initial)| `<null>` |
+
 ## `content` (on `<meta>` inside `<head>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
index 1b25e3727023..54a16278b606 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
@@ -87,6 +87,7 @@ let didWarnFormActionTarget = false;
 let didWarnFormActionMethod = false;
 let didWarnForNewBooleanPropsWithEmptyValue: {[string]: boolean};
 let didWarnPopoverTargetObject = false;
+let didWarnCommandForObject = false;
 if (__DEV__) {
   didWarnForNewBooleanPropsWithEmptyValue = {};
 }
@@ -612,6 +613,15 @@ function setProp(
       }
       return;
     }
+    case 'onCommand': {
+      if (value != null) {
+        if (__DEV__ && typeof value !== 'function') {
+          warnForInvalidEventListener(key, value);
+        }
+        listenToNonDelegatedEvent('command', domElement);
+      }
+      return;
+    }
     case 'onScroll': {
       if (value != null) {
         if (__DEV__ && typeof value !== 'function') {
@@ -940,18 +950,33 @@ function setProp(
     case 'innerText':
     case 'textContent':
       return;
+    case 'commandFor':
     case 'popoverTarget':
       if (__DEV__) {
-        if (
-          !didWarnPopoverTargetObject &&
-          value != null &&
-          typeof value === 'object'
-        ) {
-          didWarnPopoverTargetObject = true;
-          console.error(
-            'The `popoverTarget` prop expects the ID of an Element as a string. Received %s instead.',
-            value,
-          );
+        if (key === 'popoverTarget') {
+          if (
+            !didWarnPopoverTargetObject &&
+            value != null &&
+            typeof value === 'object'
+          ) {
+            didWarnPopoverTargetObject = true;
+            console.error(
+              'The `popoverTarget` prop expects the ID of an Element as a string. Received %s instead.',
+              value,
+            );
+          }
+        } else {
+          if (
+            !didWarnCommandForObject &&
+            value != null &&
+            typeof value === 'object'
+          ) {
+            didWarnCommandForObject = true;
+            console.error(
+              'The `commandFor` prop expects the ID of an Element as a string. Received %s instead.',
+              value,
+            );
+          }
         }
       }
     // Fall through
@@ -1026,6 +1051,15 @@ function setPropOnCustomElement(
       }
       break;
     }
+    case 'onCommand': {
+      if (value != null) {
+        if (__DEV__ && typeof value !== 'function') {
+          warnForInvalidEventListener(key, value);
+        }
+        listenToNonDelegatedEvent('command', domElement);
+      }
+      return;
+    }
     case 'onScroll': {
       if (value != null) {
         if (__DEV__ && typeof value !== 'function') {
@@ -3242,6 +3276,10 @@ export function hydrateProperties(
     listenToNonDelegatedEvent('toggle', domElement);
   }
 
+  if (props.onCommand != null) {
+    listenToNonDelegatedEvent('command', domElement);
+  }
+
   if (props.onScroll != null) {
     listenToNonDelegatedEvent('scroll', domElement);
   }
diff --git a/packages/react-dom-bindings/src/events/DOMEventNames.js b/packages/react-dom-bindings/src/events/DOMEventNames.js
index 579762b6962d..63c8889e59d7 100644
--- a/packages/react-dom-bindings/src/events/DOMEventNames.js
+++ b/packages/react-dom-bindings/src/events/DOMEventNames.js
@@ -26,6 +26,7 @@ export type DOMEventName =
   | 'change'
   | 'click'
   | 'close'
+  | 'command'
   | 'compositionend'
   | 'compositionstart'
   | 'compositionupdate'
diff --git a/packages/react-dom-bindings/src/events/DOMEventProperties.js b/packages/react-dom-bindings/src/events/DOMEventProperties.js
index 6b2e80ecd1eb..0751dbfd8f18 100644
--- a/packages/react-dom-bindings/src/events/DOMEventProperties.js
+++ b/packages/react-dom-bindings/src/events/DOMEventProperties.js
@@ -46,6 +46,7 @@ const simpleEventPluginEvents = [
   'canPlayThrough',
   'click',
   'close',
+  'command',
   'contextMenu',
   'copy',
   'cut',
diff --git a/packages/react-dom-bindings/src/events/DOMPluginEventSystem.js b/packages/react-dom-bindings/src/events/DOMPluginEventSystem.js
index e30c4798371d..a24f18fc024f 100644
--- a/packages/react-dom-bindings/src/events/DOMPluginEventSystem.js
+++ b/packages/react-dom-bindings/src/events/DOMPluginEventSystem.js
@@ -237,6 +237,7 @@ export const nonDelegatedEvents: Set<DOMEventName> = new Set([
   'beforetoggle',
   'cancel',
   'close',
+  'command',
   'invalid',
   'load',
   'scroll',
diff --git a/packages/react-dom-bindings/src/events/ReactDOMEventListener.js b/packages/react-dom-bindings/src/events/ReactDOMEventListener.js
index 0b2fffbcf902..7ab2b7b16cb2 100644
--- a/packages/react-dom-bindings/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom-bindings/src/events/ReactDOMEventListener.js
@@ -316,6 +316,7 @@ export function getEventPriority(domEventName: DOMEventName): EventPriority {
     case 'cancel':
     case 'click':
     case 'close':
+    case 'command':
     case 'contextmenu':
     case 'copy':
     case 'cut':
diff --git a/packages/react-dom-bindings/src/events/SyntheticEvent.js b/packages/react-dom-bindings/src/events/SyntheticEvent.js
index 11ec03091941..78dff66f9f8e 100644
--- a/packages/react-dom-bindings/src/events/SyntheticEvent.js
+++ b/packages/react-dom-bindings/src/events/SyntheticEvent.js
@@ -612,3 +612,12 @@ const ToggleEventInterface: EventInterfaceType = {
 };
 export const SyntheticToggleEvent: $FlowFixMe =
   createSyntheticEvent(ToggleEventInterface);
+
+const CommandEventInterface: EventInterfaceType = {
+  ...EventInterface,
+  command: 0,
+  source: 0,
+};
+export const SyntheticCommandEvent: $FlowFixMe = createSyntheticEvent(
+  CommandEventInterface,
+);
diff --git a/packages/react-dom-bindings/src/events/plugins/SimpleEventPlugin.js b/packages/react-dom-bindings/src/events/plugins/SimpleEventPlugin.js
index 4873dacdbf43..599f48efc553 100644
--- a/packages/react-dom-bindings/src/events/plugins/SimpleEventPlugin.js
+++ b/packages/react-dom-bindings/src/events/plugins/SimpleEventPlugin.js
@@ -29,6 +29,7 @@ import {
   SyntheticPointerEvent,
   SyntheticSubmitEvent,
   SyntheticToggleEvent,
+  SyntheticCommandEvent,
 } from '../../events/SyntheticEvent';
 
 import {
@@ -166,6 +167,9 @@ function extractEvents(
     case 'submit':
       SyntheticEventCtor = SyntheticSubmitEvent;
       break;
+    case 'command':
+      SyntheticEventCtor = SyntheticCommandEvent;
+      break;
     case 'toggle':
     case 'beforetoggle':
       // MDN claims <details> should not receive ToggleEvent contradicting the spec: https://html.spec.whatwg.org/multipage/indices.html#event-toggle
@@ -210,7 +214,9 @@ function extractEvents(
       // nonDelegatedEvents list in DOMPluginEventSystem.
       // Then we can remove this special list.
       // This is a breaking change that can wait until React 18.
-      (domEventName === 'scroll' || domEventName === 'scrollend');
+      (domEventName === 'scroll' ||
+        domEventName === 'scrollend' ||
+        domEventName === 'command');
 
     const listeners = accumulateSinglePhaseListeners(
       targetInst,
diff --git a/packages/react-dom-bindings/src/shared/possibleStandardNames.js b/packages/react-dom-bindings/src/shared/possibleStandardNames.js
index b237d116e43e..2dda2f5e66db 100644
--- a/packages/react-dom-bindings/src/shared/possibleStandardNames.js
+++ b/packages/react-dom-bindings/src/shared/possibleStandardNames.js
@@ -38,6 +38,8 @@ const possibleStandardNames = {
   classname: 'className',
   cols: 'cols',
   colspan: 'colSpan',
+  command: 'command',
+  commandfor: 'commandFor',
   content: 'content',
   contenteditable: 'contentEditable',
   contextmenu: 'contextMenu',

From 3389710d2f47f81d8ccac8d35a8135eb28c77f8c Mon Sep 17 00:00:00 2001
From: chirokas <157580465+chirokas@users.noreply.github.com>
Date: Mon, 13 Apr 2026 13:37:27 +0000
Subject: [PATCH 4/4] Just some tweaks

---
 .../src/client/ReactDOMComponent.js           | 60 ++++++++++---------
 1 file changed, 33 insertions(+), 27 deletions(-)

diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
index 54a16278b606..7f2f6faacb34 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
@@ -950,37 +950,43 @@ function setProp(
     case 'innerText':
     case 'textContent':
       return;
-    case 'commandFor':
-    case 'popoverTarget':
-      if (__DEV__) {
-        if (key === 'popoverTarget') {
-          if (
-            !didWarnPopoverTargetObject &&
-            value != null &&
-            typeof value === 'object'
-          ) {
-            didWarnPopoverTargetObject = true;
-            console.error(
-              'The `popoverTarget` prop expects the ID of an Element as a string. Received %s instead.',
-              value,
-            );
+    // Fall through
+    default: {
+      switch (key) {
+        case 'commandFor': {
+          if (__DEV__) {
+            if (
+              !didWarnCommandForObject &&
+              value != null &&
+              typeof value === 'object'
+            ) {
+              didWarnCommandForObject = true;
+              console.error(
+                'The `commandFor` prop expects the ID of an Element as a string. Received %s instead.',
+                value,
+              );
+            }
           }
-        } else {
-          if (
-            !didWarnCommandForObject &&
-            value != null &&
-            typeof value === 'object'
-          ) {
-            didWarnCommandForObject = true;
-            console.error(
-              'The `commandFor` prop expects the ID of an Element as a string. Received %s instead.',
-              value,
-            );
+          break;
+        }
+        case 'popoverTarget': {
+          if (__DEV__) {
+            if (
+              !didWarnPopoverTargetObject &&
+              value != null &&
+              typeof value === 'object'
+            ) {
+              didWarnPopoverTargetObject = true;
+              console.error(
+                'The `popoverTarget` prop expects the ID of an Element as a string. Received %s instead.',
+                value,
+              );
+            }
           }
+          break;
         }
       }
-    // Fall through
-    default: {
+
       if (
         key.length > 2 &&
         (key[0] === 'o' || key[0] === 'O') &&