Dialouge boxes (i.e images, links etc) in Tiny MCE not taking input and is greyed out

Question

In the TinyMCE editor (React integration) I am calling the editor inside a modal. Everything seems to work fine except that any other image link or website link adding dialogue box is not taking input and is greyed out picture of greyed out editor

Here is the editor code snippet:

                    <Editor
                        apiKey="APIKEY"
                        onInit={(evt, editor) => {
                            editorRef.current = editor;
                            setLoadingEditor(1);
                        }}
                        initialValue="<p>Some initial text.</p>"
                        init={{
                            height: 440,
                            menubar: true,

                            plugins: [
                                'advlist autolink lists link image charmap print preview anchor',
                                'searchreplace visualblocks code fullscreen',
                                'insertdatetime media table paste code help wordcount',
                                'image code',
                            ],
                            toolbar:
                                'undo redo | formatselect | ' +
                                'bold italic backcolor | alignleft aligncenter ' +
                                'alignright alignjustify | bullist numlist outdent indent | ' +
                                'removeformat | image | code | help',

                            content_style:
                                'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',

                           
                        }}
                    />

The Editor seems to work fine in normal use, but inside my modal component this problem is coming.

Edit : I am using Material UI component for Modal.

Answer 1

This is most likely your "modal" dialog not relinquishing focus. Since there is no such thing as a modal in plain HTML your choice of modal is likely a combination of HTML and Javascript (e.g. Bootstrap) and it is not wanting to let go of focus. You will need to figure out how to tell your modal code to allow something else to get control.

The TinyMCE documentation has an example of how to do this for Bootstrap:

https://www.tiny.cloud/docs/integrations/bootstrap/#usingtinymceinabootstrapdialog

If you are using a different technology you will need to determine how to do something similar.