Spreaded props are lost when combined with explicitly setted props

[ufukbakan]

What version of million are you using?

3.0.6

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

pnpm

What operating system are you using?

Windows

What browser are you using?

Chrome

Describe the Bug

I'm trying to write a Higher Order Component, i need to pass all props but i've noticed that my aria attributes are lost. Then i realized every prop that i inherited via spread operator are lost. I'll provide a simplified code example:

Main component

export default function App(){  return <Wrapper aria-label='xyz' style={{ background: "red" }} /> }

This code doesn't work

import { HTMLAttributes } from "react";

export default function Wrapper(props: HTMLAttributes<HTMLElement>) {
    return <div {...props} onClick={undefined}>
        <div>
            children
        </div>
    </div>
}

Whereas this code works:

import { HTMLAttributes } from "react";

export default function Wrapper(props: HTMLAttributes<HTMLElement>) {
    return <div {...props}>
        <div>
            children
        </div>
    </div>
}

This code also works (Children depth reduced):

import { HTMLAttributes } from "react";

export default function Wrapper(props: HTMLAttributes<HTMLElement>) {
    return <div {...props}>
            children
    </div>
}

What's the expected result?

expected result

<div aria-label="xyz" style="background: red;">
  <div>children</div>
</div>

actual result:

<div $="v0">
  <div>children</div>
</div>

Link to Minimal Reproducible Example

https://stackblitz.com/edit/vitejs-vite-mrgmv1?file=src%2FApp.jsx

Participation

• [ ] I am willing to submit a pull request for this issue.

[github-actions[bot]]

Thanks for opening this issue! A maintainer will review it soon.

[tobySolutions]

Hey @ufukbakan, I think this is due to this limitation here:

https://million.dev/docs/manual-mode/block#rules-of-blocks

I'd suggest trying another means to not use the spread operator, I'll also ask the team to be sure what other things you can do.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within the next 7 days.

[ufukbakan]

Okay the current workaround is instead of writing props like that:

return <button {...props} disabled={true]  />

refactor it as:

props = {...props, disabled: true};
return <button {...props} />