dialog.transitionComponent prop

[ghost]

What is the proper way to use the transitionComponent prop for dialogs? The Material UI documentation uses the forwardRef function as

const Transition = React.forwardRef(function Transition(props, ref) {
return <Slide direction="up" ref={ref} {...props} />;
});

but the Feliz.React.forwardRef function returns a ReactElement rather than a ReactElementType. Is there an additional function call required to convert from ReactElement to ReactElementType, or is there a simpler way to go about this?

[Shmew]

Hi @ShaneMasuda, try unboxing and see if it works.

[ghost]

@Shmew unboxing the return value of the forwardRef function into a ReactElementType? That doesn't seem to work for me, and neither does the following

as I get a console error saying the slide component can't read the property 'ref' of undefined.

[Shmew]

I think this will work unbox<ReactElementType>(System.Func<_,_,_> transition)

@cmeeren, @Zaid-Ajaj thoughts on how APIs that need ReactElementType can be better handled?

[ghost]

@Shmew so I tried that as

but it seems the slide component still doesn't know about the ref. Namely, I'm getting the following error:

Am I perhaps not using the forwardRef function correctly? Thank you for responding so quickly btw!

[Shmew]

Yeah, you're using it correctly. I'm not really sure you even need it here, you could just try making the element itself and unboxing that, or unbox<ReactElementType>(System.Func<_,_,_>(fun props ref -> transition(props,ref))

Thank you for responding so quickly btw!

You're welcome!

[ghost]

Unboxing the element itself yielded this:

and using the last line yielded this:

Is there any way you could try to get a simple example dialog with a transitionComponent up and running on your end? It would be greatly appreciated!

[Shmew]

I just spent some time trying to figure this out, I'm not sure how to fix it right now :(. I could have sworn I already battled this issue before.

[ghost]

No worries! If any updates happen I'll be here. In the meantime I can work around it by making my own backdrop and making the dialog a child of the slide component.

[cmeeren]

@Zaid-Ajaj do you have any input here (see OP)? React.forwardRef is from Feliz, I suppose?

[Zaid-Ajaj]

@cmeeren I have no idea, a reproducible example would be nice to see so that we can test what the problem is and compare with how the code looks like in native Mui

[marcpiechura]

Hey,

I run into the same issue.
@ShaneMasuda have you been able to resolve this one or are you still using your workaround?

thanks.

[ghost]

@marcpiechura @Shmew @Zaid-Ajaj coming back to this issue because I found a fix, I created a ReactElementType from scratch and combined the keys and values manually as custom props, which seems to do the trick:

The main issue here is that React.forwardRef always seems to yield null for the ref. Please let me know if anything changes!