[mergeProps] TypeScript error with data-* attributes
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 62/100
- Issue type
- Bug
- Clarity
- Clearly specified
- Activity status
- Stale
- Tech stack
- react, typescript
- Domain
- frontend
Research direction
Start at the mergeProps entry point and compare its type definitions with the useRender.ElementProps fix referenced in #2370. Confirm that a div props object containing a data-* attribute is accepted by TypeScript, while preserving the existing mergeProps behavior.
Written by the indexing model from the issue text.
Description
Bug report
Summary
When using mergeProps with useRender, TypeScript reports an error for data-* attributes even though they are valid HTML attributes.
Steps to reproduce
import { useRender } from "@base-ui/react/use-render";
import { mergeProps } from "@base-ui/react/merge-props";
function Title({ render, className, ...props }: useRender.ComponentProps<"div">) {
return useRender({
render,
defaultTagName: "div",
props: mergeProps<"div">(
{
className: "my-class",
"data-slot": "title", // ❌ TypeScript error
},
props
),
});
}
Expected behavior
data-* attributes should be accepted without TypeScript errors, as they are valid HTML attributes.
Actual behavior
TypeScript reports:
Object literal may only specify known properties, and '"data-slot"' does not exist in type 'WithBaseUIEvent<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>'
Context
@base-ui/reactversion: 1.0.0- TypeScript version: 5.x
Related
This is related to #2370, which fixed the same issue for useRender.ElementProps. However, the fix was not applied to mergeProps.
- Dominant language
- TypeScript
- Stars
- 11k
- Forks
- 546
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 105
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from mui/base-ui
-
good first issue
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
component: toast status: waiting for maintainer
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
-
component: navigation menu
Difficulty 2/5 Half a day Newbie friendliness 72/100
-
component: slider
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
-
component: drawer has workaround type: bug
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
Similar issues
-
calcite-components needs triage refactor
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Esri/calcite-design-system#15203 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 91/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 95/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Automattic/studio#4908 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 90/100