Search code examples
twitter-bootstrapbootstrap-modaljodit

Jodit editor popups not working in Bootstrap modal


When I put a Jodit editor (3.4.2) inside a Bootstrap modal (4.3) any of the Jodit toolbar items that popup a form don't allow you to type in the inputs on that form. For example, if you click on the image toolbar icon, a form pops up for you to type in a URL. That input field won't take the focus to allow you to type anything. The buttons on those popup forms do work.

Everything else Jodit-wise seems to work fine in a modal, just not the forms that popup when a toolbar icon is selected. The same Jodit configuration works on that page when it's not in a Bootstrap modal.

Jodit sets the z-index much higher than the modal. There's nothing obvious like the input fields are disabled. I thought perhaps the editor needed to be created after the modal was shown, but that had no effect on the problem.

HTML

<div>
    <div>
        Click on the image tool.  Can edit url input field.
    </div>
    <div id="editor1"></div>    

    <button onclick="$('#dialog').modal( 'show' );">
        Show modal with editor
    </button>
</div>
<div id="dialog" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">

                <div>
                    Click on the image tool.  Can't edit url input field.
                </div>
                <div id="editor2"></div>    

            </div>

        </div>
    </div>
</div>

JavaScript

var editor1 = new Jodit( '#editor1' );
var editor2 = new Jodit( '#editor2' );

Example: https://jsfiddle.net/Lmqj2ybv/1/


Solution

  • Need to delete tabindex="-1"

    var editor1 = new Jodit( '#editor1' );
    var editor2 = new Jodit( '#editor2' );
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jodit/3.4.26/jodit.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jodit/3.4.26/jodit.min.js"></script>
     <div>
             <div>
              Click on the image tool.  Can edit url input field.
              </div>
              <div id="editor1"></div>    
    
       <button onclick="$('#dialog').modal( 'show' );">
       Show modal with editor
       </button>
     </div>
     <div id="dialog" class="modal" role="dialog">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
          
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            
            <div class="modal-body">
    
              <div>
              Click on the image tool.  Can't edit url input field.
              </div>
              <div id="editor2"></div>    
    
            </div>
            
          </div>
        </div>
      </div>