Polymorphic: Conflicting props is typed using the "polymorphic" rather than the "as"

[marceloadsj]

Hello everyone.

I am having one issue with props in common between a Polymorphic Component and a component used on "as" prop.

Shouldn't the "as" component wins agains the original polymorphic component below it?

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wG4BYAKFEljhgE8wk4AqOFAZzgAUIAbBiGhgAFsDRxsuAgAEoKACbAAHgFoArsAD0RdDDWRBwqGIlkqVRUjT8UROGggA7TvADyUYAHNgzlPwAXLwCQiLiaAB0AGLQAO72isiYAMK4kM5IzjAAPABEAEYaMDAueQA0cADecEgqKOD8SMEFEAKoznAAvgB8FJRWNnYOTq7wAHIaIAVIUACi9Y3NIcbhEjHxiclp4C5ZuYXFpc4V1bWLYE3BzlMzUN19g7b2LKNucADKMF7O3gsNl2WAAowDgwJxgjU6gCrnA3D9vN0AJRwAC8PTgACkPgANSJzJogfb9Kh1WjwN7wGBId6ouAAbSocGZcBynh8fgC5xhSFRVUwAU4SC6cG0PXKlkoLNZ7N8-n4HE4fMm01m-yWIuhSz5AEYAEwAZhFYolUpZbK8cq5XD5XwR6sBmouTVReRQBTQeVF4qoAF1+kA

[jjenzz]

I could have sworn there was an explicit reason why we made the original component props override before (it even mentions that OwnProps take precedence in our code comments) but I cannot remember why for the life of me.

I've created a draft PR that does what you're expecting for us to think through.

[marceloadsj]

Awesome, thanks for your quick response about this. 😊

[jjenzz]

I realised it was done this way because that's how polymorphism functions https://codesandbox.io/s/kind-worker-83vfn. The log here is always executed from the original.

I am going to continue thinking about this while I'm working on other things though as it isn't very intuitive.

For now, I would recommend trying to avoid prop clashes if possible or you can use the Slot component if it's easier:

import { Slot } from '@radix-ui/react-slot';

<Original as={Slot}>
	<NumberExample example={123} />
</Original>

[marceloadsj]

Hummm, I think I understand the reason. It still feels weird 😆, but I can visualize why...

I mean, for a case like (simplified for brevity):

const Original: ForwardRefComponent<"div", { example: string }> = React.forwardRef(() => {
  const upperCaseExampleString = example.toUpperCase();

  // ...
});;

<Original as={NumberedExample} example={1234} />
// No TS errors but, runtime error "example.toUpperCase is not a function"

[marceloadsj]

Basically, the props from the polymorphic component ("Original" in the example) should be always keep in place cause, well, that's what that particular component is expecting...

[jjenzz]

Exactly 🙂