'Can't write on CLEditor textarea inside of a Bootstrap modal unless I press F12

This is a weird and simple problem that I'm not able to find a solution. I'm trying to get a CLEditor <textarea> inside a Bootstrap modal. It loads just fine, the problem is that I'm not able to write on it unless I open Chrome's DevTools when pressing F12. I know that I could make a popup window and use the <textarea> there, but using it in a modal looks better on my opinion.

Right now I only have the modal, a button to show the modal, and the jQuery function from CLEditor. Here's my code:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- ClEditor  -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="inc/CLEditor/jquery.cleditor.css" />
    <script src="inc/CLEditor/jquery.cleditor.min.js"></script>
    <!-- Boostrap  -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <title>Comisión de Análisis</title>
</head>

<body>

    <div>
        <button type="button" id="agr" class="btn btn-primary" data-toggle="modal" data-target="#modalAgregar" >Agregar subtema</button>
    </div>

    <!-- Modal agregar subtema  -->
    <div id="modalAgregar" class="modal fade bd-example-modal-lg w-50 mx-auto" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Añadiendo Subtema</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="forms" style="width:90%;margin:auto;">
                    <form action="" enctype="multipart/form-data" method="POST">
                        <br>
                        <div class="form-group">
                            <label for="tinput">Anotaciones:</label> 
                            <textarea class="form-control" rows="3" name="anotaciones" id="tinput"></textarea>
                        </div>
                        <br>
                        <center><button type="submit" class="btn btn-success" style="width:30%; margin:auto;" >Agregar</button></center>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--  -->

    <script>
        $(document).ready( function () {

            $("#tinput").cleditor();

        });
    </script>

</body>

Edit: Tried to use $("#tinput").cleditor()[0].refresh(); on a openModal() function as I found another thread with a similar issue, but it didn't work.

javascripthtmljquerybootstrap-4cleditor


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions