Conversion from functionComponent to [<ReactComponent>] lead to broken component

[panmona]

After the conversion of a React.functionComponent to the new [<ReactComponent>] annotation, the component changed it's behavior.

Repro Steps

1. Start the repro that can be found here: https://github.com/panmau/feliz-reactcomponent-repro
2. Focus the input field below the <ReactComponent> heading
3. Type one letter into the field

Expected Result

Field keeps focus

Actual Result

Field loses focus

Environment

Feliz: 1.49 Browser: Chromium 92 & Firefox 91 OS: Manjaro Linux 21.1.0 Pahvo

Background info

The implementation of the two TextFields displayed are in TextFieldFunctionComponent and TextFieldAnnotation. The only difference between them is the usage of either React.functionComponent or the annotation.

The repro involves Feliz.MaterialUI as I wasn't able to reproduce it in a different way.

I am not sure whether this issue lies within Feliz or Feliz.MaterialUI (or somewhere else) but if you think it is rather Feliz.MaterialUI, we can still transfer the issue.

[Zaid-Ajaj]

Hi @panmau thanks for reporting the issue! I have a look in the next couple of days when time permits

[Linschlager]

@Zaid-Ajaj Thanks for the reply, any news on this?

[Zaid-Ajaj]

@Linschlager Sorry haven't had the time to investigate properly. Will do soon 🤞

[b3ng91]

Hi @Zaid-Ajaj, any news on this issue? Thanks in advance 👋🏻

[Zaid-Ajaj]

Hi @b3ng91 i haven't had the time to properly check it out but now I looked at the code again and I think the problem is in this

prop.custom("inputComponent", FormattedInput)

can you try

prop.custom("inputComponent", (fun args -> FormattedInput args))

?

[b3ng91]

Hi @Zaid-Ajaj. That did not change anything unfortunately.