• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

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

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.

enter image description here

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.

enter image description here

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.

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error