Unable to access inputfield in modal generated by TinyMCE react in Next.JS

Question

I am using Next.JS in my project. I want to add the TinyMCE editor to my page. I have used the below code.

<TinyMceEditor
    selector='textarea'
    initialValue={ props.value }
    apiKey=<API_KEY>
    init={{
        height: 500,
        menubar: false,
        plugins: [
            'advlist autolink lists link image', 
            'charmap print preview anchor help',
            'searchreplace visualblocks code',
            'insertdatetime media table paste wordcount'
        ],
        toolbar:
            'undo redo | formatselect | bold italic underline | \
            alignleft aligncenter alignright | \
            bullist numlist outdent indent | \
            anchor link table image media video | \
            searchreplace visualblocks code'
    }}
    onChange={(...args) => console.log(args)}
/>

I am getting two different behavior of this code for the two different pages.

On the homepage, i.e. localhost:3000/, the editor is working correctly. I can add Images through a popup modal, attach a link, etc.

But when I go localhost:3000/admin/teams the input fields of the popup modal are not focusable. It does not gain focus when I click on it. But at the same time, I can interact with the buttons/checkboxes. It is just not focusing on the input field.

I am not getting what is causing this problem. The same problem is also happening in Jodit editor also. I am not getting whether it is related to the Next.JS environment issue or path-related issue. From the last few days after experimenting with these two editors, I am thinking the issue is related to the modal elements used in them (maybe).

Any advice or help would be appreciated. Thank you.

Answer 1

It was an issue with the dialog box of Material UI. After passing disableEnforceFocus={true} to <Dialog /> component, it got resolved.