diff --git a/.changeset/gold-scissors-know.md b/.changeset/gold-scissors-know.md new file mode 100644 index 0000000000..626fcd1d48 --- /dev/null +++ b/.changeset/gold-scissors-know.md @@ -0,0 +1,5 @@ +--- +'rax-compat': patch +--- + +lowercase props compat diff --git a/packages/rax-compat/src/possible-standard-names.ts b/packages/rax-compat/src/possible-standard-names.ts index cd53406924..d32e4bcadd 100644 --- a/packages/rax-compat/src/possible-standard-names.ts +++ b/packages/rax-compat/src/possible-standard-names.ts @@ -23,6 +23,7 @@ const possibleStandardNames = [ 'marginHeight', // meta 'charSet', + 'dangerouslySetInnerHTML', ].reduce((records: Record, iter: string) => { records[iter.toLowerCase()] = iter; return records; diff --git a/packages/rax-compat/src/props.ts b/packages/rax-compat/src/props.ts index 4e68887e3e..9b13b22ee0 100644 --- a/packages/rax-compat/src/props.ts +++ b/packages/rax-compat/src/props.ts @@ -30,6 +30,9 @@ function transformProps(props: ComponentProps>): Reco } else if (possibleStandardNames.hasOwnProperty(lowerCasedPropKey)) { // Transform attribute names that make it works properly in React. key = possibleStandardNames[lowerCasedPropKey]; + } else { + // Handles component props from rax-components like resizeMode, this causes React to throw a warning. + key = lowerCasedPropKey; } transformedProps[key] = val; diff --git a/packages/rax-compat/tests/props.test.tsx b/packages/rax-compat/tests/props.test.tsx index 7e86c3db4d..ce5cba697d 100644 --- a/packages/rax-compat/tests/props.test.tsx +++ b/packages/rax-compat/tests/props.test.tsx @@ -41,4 +41,14 @@ describe('props', () => { inputmode: 'numeric', }).inputMode).toBe('numeric'); }); + + it('should work with dangerouslySetInnerHTML', () => { + expect( + transformProps({ + dangerouslySetInnerHTML: { __html: 'xxx' }, + }).dangerouslySetInnerHTML, + ).toEqual({ + __html: 'xxx', + }); + }); });