Editor: not render data with React Hook Form

[swotiendang]

Describe the bug

Cannot render data in Editor

Reproducer

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

System Information

• quill 2.0.0
• primereact 10.6.6, 10.8.0
• Chrome v127 (latest)

Steps to reproduce the behavior

No response

Expected behavior

No response

[github-actions]

Please fork the Stackblitz project and create a case demonstrating your bug report. This issue will be closed if no activities in 20 days.

[swotiendang]

HI @melloware , this is the code:
https://stackblitz.com/edit/vitejs-vite-ccxqty?file=src%2FApp.jsx

[melloware]

@swotiendang it works outside of React Hook Form see my reproducer: https://stackblitz.com/edit/vitejs-vite-mdqney?file=package.json,src%2FApp.jsx

You might want to debug RHF.

[swotiendang]

Hi @melloware , please take a look at this image:

the value is passed to Editor but it didn't display, in this case, I highly believe it's issue of Editor, not ReactFormHook

[melloware]

But if you look at my example why does it work outside of RHF?

[swotiendang]

@melloware I cannot tell, what I can see value props is passed to Editor successfully, but it renders nothing. My guess is: Editor in primereact handle shouldComponentUpdate incorrectly, I would browse into source code of Editor when having time to check.

Some other people faces the same issue: https://stackoverflow.com/questions/78421490/im-not-able-to-render-data-in-the-prime-react-editor

[melloware]

@avasuro any thoughts you just recently made changes to editor...

[avasuro]

No ideas for now, but I have more minimalistic reproduction, which shows that same bug reproduces also outside RHF:
https://stackblitz.com/edit/vitejs-vite-hssdna?file=src%2FApp.jsx

Here bug reproduces if input value changes in some useEffect immediately after first render. To make demo work as expected - comment setValue inside useEffect and uncomment setTimeout function to update input value with a little delay.

P.S.: I think it's because of closure to initQuill function, that contains reference to initial (empty) props.value instead of taking the most up to date, and useUpdateEffect doesn't called on first rerender, because quill is not initialized at that moment (quill.current is undefined).

P.P.S.: I think I have a fix for that (just, probably, a bit ugly)

[melloware]

nice work @avasuro

[swotiendang]

Thanks @melloware , @avasuro

[OldManMeta]

This issue is still present in 10.8.2

render={({ field, fieldState }) => {
        
                    // Debugging useEffect to check value passed to Editor
                    useEffect(() => {
                        console.log("Current value passed to Editor:", field.value);
                    }, [field.value]);
            
                    return(
                    <>                       
                            <Editor 
                                id={field.name}
                                value={field.value}                        
                                onTextChange={(e: EditorTextChangeEvent) => field.onChange(e.htmlValue)}  
                                headerTemplate={editorHeader} 
                                className={classNames({ 'p-invalid': fieldState.error })}
                            />
</>

[quoctienkt]

@OldManMeta make sure to remove node_modules and do npm install. It should my problem after upgrade to [email protected]

[OldManMeta]

Yeah tried several ways to try to get this to work - just couldn't. In the end reverted back to react-quill directly.

Thanks for the response - love primereact BTW.