popoverTarget -> popoverTargetElement

eps1lon · May 1, 2024 · b394c00 · b394c00
1 parent 68a37c6
commit b394c00
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 4 deletions.
diff --git a/fixtures/attribute-behavior/AttributeTableSnapshot.md b/fixtures/attribute-behavior/AttributeTableSnapshot.md
@@ -8476,7 +8476,7 @@
 ## `popoverTarget` (on `<button>` inside `<div>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `popoverTarget=(string)`| (initial)| `<null>` |
+| `popoverTarget=(string)`| (initial, warning)| `<null>` |
 | `popoverTarget=(empty string)`| (initial)| `<null>` |
 | `popoverTarget=(array with string)`| (initial)| `<null>` |
 | `popoverTarget=(empty array)`| (initial)| `<null>` |
@@ -8498,6 +8498,31 @@
 | `popoverTarget=(null)`| (initial)| `<null>` |
 | `popoverTarget=(undefined)`| (initial)| `<null>` |
 
+## `popoverTargetElement` (on `<button>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `popoverTargetElement=(string)`| (initial)| `<null>` |
+| `popoverTargetElement=(empty string)`| (initial)| `<null>` |
+| `popoverTargetElement=(array with string)`| (initial)| `<null>` |
+| `popoverTargetElement=(empty array)`| (initial)| `<null>` |
+| `popoverTargetElement=(object)`| (initial)| `<null>` |
+| `popoverTargetElement=(numeric string)`| (initial)| `<null>` |
+| `popoverTargetElement=(-1)`| (initial)| `<null>` |
+| `popoverTargetElement=(0)`| (initial)| `<null>` |
+| `popoverTargetElement=(integer)`| (initial)| `<null>` |
+| `popoverTargetElement=(NaN)`| (initial, warning)| `<null>` |
+| `popoverTargetElement=(float)`| (initial)| `<null>` |
+| `popoverTarget=(true)`| (initial, warning)| `<null>` |
+| `popoverTargetElement=(false)`| (initial, warning)| `<null>` |
+| `popoverTargetElement=(string 'true')`| (initial)| `<null>` |
+| `popoverTargetElement=(string 'false')`| (initial)| `<null>` |
+| `popoverTargetElement=(string 'on')`| (initial)| `<null>` |
+| `popoverTargetElement=(string 'off')`| (initial)| `<null>` |
+| `popoverTargetElement=(symbol)`| (initial, warning)| `<null>` |
+| `popoverTargetElement=(function)`| (initial, warning)| `<null>` |
+| `popoverTargetElement=(null)`| (initial)| `<null>` |
+| `popoverTargetElement=(undefined)`| (initial)| `<null>` |
+
 ## `popoverTargetAction` (on `<button>` inside `<div>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
@@ -8512,8 +8537,8 @@
 | `popoverTargetAction=(integer)`| (initial)| `"toggle"` |
 | `popoverTargetAction=(NaN)`| (initial, warning)| `"toggle"` |
 | `popoverTargetAction=(float)`| (initial)| `"toggle"` |
-| `popoverTargetAction=(true)`| (initial, warning)| `"toggle"` |
-| `popoverTargetAction=(false)`| (initial, warning)| `"toggle"` |
+| `popoverTargetAction=(true)`| (initial)| `"toggle"` |
+| `popoverTargetAction=(false)`| (initial)| `"toggle"` |
 | `popoverTargetAction=(string 'true')`| (initial)| `"toggle"` |
 | `popoverTargetAction=(string 'false')`| (initial)| `"toggle"` |
 | `popoverTargetAction=(string 'on')`| (initial)| `"toggle"` |

diff --git a/fixtures/attribute-behavior/src/attributes.js b/fixtures/attribute-behavior/src/attributes.js
@@ -1453,6 +1453,11 @@ const attributes = [
     read: element => element.popoverTargetElement,
     tagName: 'button',
   },
+  {
+    name: 'popoverTargetElement',
+    read: element => element.popoverTargetElement,
+    tagName: 'button',
+  },
   {name: 'popoverTargetAction', overrideStringValue: 'show', tagName: 'button'},
   {
     name: 'poster',

diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
@@ -1815,6 +1815,8 @@ function getPropNameFromAttributeName(attrName: string): string {
       return 'className';
     case 'for':
       return 'htmlFor';
+    case 'popopverTarget':
+      return 'popopverTargetElement';
     // TODO: The rest of the aliases.
     default:
       return attrName;

diff --git a/packages/react-dom-bindings/src/shared/getAttributeAlias.js b/packages/react-dom-bindings/src/shared/getAttributeAlias.js
@@ -10,6 +10,7 @@
 const aliases = new Map([
   ['acceptCharset', 'accept-charset'],
   ['htmlFor', 'for'],
+  ['popoverTargetElement', 'popoverTarget'],
   ['httpEquiv', 'http-equiv'],
   // HTML and SVG attributes, but the SVG attribute is case sensitive.],
   ['crossOrigin', 'crossorigin'],

diff --git a/packages/react-dom-bindings/src/shared/possibleStandardNames.js b/packages/react-dom-bindings/src/shared/possibleStandardNames.js
@@ -345,8 +345,9 @@ const possibleStandardNames = {
   pointsaty: 'pointsAtY',
   pointsatz: 'pointsAtZ',
   popover: 'popover',
-  popovertarget: 'popoverTarget',
+  popovertarget: 'popoverTargetElement',
   popovertargetaction: 'popoverTargetAction',
+  popovertargetelement: 'popoverTargetElement',
   prefix: 'prefix',
   preservealpha: 'preserveAlpha',
   preserveaspectratio: 'preserveAspectRatio',

diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -2926,6 +2926,18 @@ describe('ReactDOMComponent', () => {
       }).toErrorDev(
         'Warning: Invalid DOM property `autofocus`. Did you mean `autoFocus`?\n    in input',
       );
+
+      await expect(async () => {
+        const container = document.createElement('div');
+        const root = ReactDOMClient.createRoot(container);
+        await act(() => {
+          root.render(
+            React.createElement('button', {popoverTarget: 'some-element'}),
+          );
+        });
+      }).toErrorDev(
+        'Warning: Invalid DOM property `popoverTarget`. Did you mean `popoverTargetElement`?\n    in button',
+      );
     });
 
     it('should suggest property name if available (ssr)', () => {
@@ -2943,6 +2955,13 @@ describe('ReactDOMComponent', () => {
       ).toErrorDev(
         'Warning: Invalid DOM property `autofocus`. Did you mean `autoFocus`?\n    in input',
       );
+      expect(() =>
+        ReactDOMServer.renderToString(
+          React.createElement('button', {popoverTarget: 'some-element'}),
+        ),
+      ).toErrorDev(
+        'Warning: Invalid DOM property `popoverTarget`. Did you mean `popoverTargetElement`?\n    in button',
+      );
     });
   });