mui / mui/base-ui

[mergeProps] TypeScript error with data-* attributes

Open
#3,545 1 comment 2 reactions 0 assignees View on GitHub
has workaround typescript
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

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

```tsx
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, HTMLDivElement>>'
```

## Context

- `@base-ui/react` version: 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`.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.