[Bug]: propElementValues option of react/jsx-curly-brace-presence doesn't catch JSX fragments as prop values #3951
Description
Is there an existing issue for this?
- I have searched the existing issues and my issue is unique
- My issue appears in the command-line and not only in the text editor
Description Overview
Bug description
The propElementValues: 'always' option in the react/jsx-curly-brace-presence rule does not flag JSX fragments (<>...</>) passed as prop values without curly braces.
Example code
import * as React from 'react';
const AttentionIcon = () => <span>⚠️</span>;
export const TestComponent = () => {
return (
<div>
{/* This JSX fragment should be flagged but isn't */}
<div
title=<>
<AttentionIcon /> Installation not completed
</>
/>
{/* This is correctly ignored (already has braces) */}
<div title={<>Fragment with braces</>} />
{/* This regular JSX element is correctly flagged */}
<div title=<div>Regular element without braces</div> />
</div>
);
};Error encountered
ESLint runs without flagging any errors for the JSX fragments used as prop values without curly braces.
Reproducing case
The error should be visible in an IDE but isn't. No error is reported when running eslint:
# With this ESLint configuration:
# "react/jsx-curly-brace-presence": ["error", { "propElementValues": "always" }]
eslint TestComponent.tsx
# Result: No errors reported (should report one error)Expected Behavior
Expected behavior description
When using the propElementValues: 'always' configuration, ESLint should flag the JSX fragments as prop values without curly braces and offer auto-fix suggestions to wrap the JSX elements in curly braces.
Example
export const TestComponent = () => {
return (
<div>
{/* Should be auto-fixed to have braces */}
<div
title={
<>
<AttentionIcon /> Installation not completed
</>
}
/>
</div>
);
};The rule should report one error and offer an auto-fix suggestion. The error and auto-fix should be available in any IDE.
eslint-plugin-react version
v7.37.5
eslint version
v8.57.0
node version
v22.13.1