Function ondblclick

I try to perform an ondblclick function with javaScript inside a table, when you double-click on the row of the table a text area is displayed to edit the content, the problem is that as long as little text works wonderfully, when the text is long it stops working some idea of why?

TABLE WHERE I CALL THE JS FUNCTION

 <?php   
     $pos=0;     
     foreach($beneficios as $beneficio)
     {
        $pos++;
     ?>

        <tr class="abajo" onMouseDown="menu(event,<?php echo $beneficio->__GET('IdBeneficio');?>)" ondblclick="editarBeneficio(<?php echo "'".$beneficio->__GET('DescripcionBeneficio')."',".$beneficio->__GET("IdBeneficio");?>)">
              <td class="derecho"><?php echo $pos?></td>
              <td class="derecho" ><?php echo $beneficio->__GET("DescripcionBeneficio"); ?></td>
        </tr> 
    <?php             
    }//CIERRA foreach($beneficios as $beneficio)
    ?>

FUNCTION JS, only hidden or shows contents

 function editarBeneficio(desc,idBeneficio) {
    //ABRE VENTANA MODAL EDITAR BENEFICIO Y MUESTRA DATOS ANTERIORES
    document.getElementById('form_edit_beneficio').style.display = 'block';               
    document.getElementById('tabla_beneficios').style.display = 'none'; 
    document.getElementById('herramientas').style.display = 'none';

    document.getElementById('txtEditDescBeneficio').innerHTML = desc;                     
    $("#IdBeneficio").val(idBeneficio);        
}

FORM TO EDIT

<div class="row" style="display:none" id="form_edit_beneficio"><!-- ROW EDITAR BENEFICIO -->

        <div class="row"><!--TITULO -->
            <div class="col-md-10 col-md-offset-1">
                <h4>Modificar beneficio</h4>
            </div>        
        </div><!-- CIERRA TITULO -->

        <div class="row"><!-- FORM EDITAR BENEFICIO -->
            <div class="col-md-10 col-md-offset-1">
                <form action="../controlador/homecontroller.php" method="post" id="EditBeneficio" name="EditBeneficio">

                    <div class="form-group">
                        <label for="txtEditDescBeneficio">Beneficio</label>
                        <textarea type="text" class="form-control" id="txtEditDescBeneficio" name="txtEditDescBeneficio" required></textarea>                        
                    </div>

                    <div class="form-group">
                        <div class="col-md-5 col-md-offset-1" >
                            <button type="submit" class="btn btn-success" style="width:100%">Guardar</button>                            
                        </div>
                        <div class="col-md-5 col-md-offset-1">                            
                            <button onclick="canceledit()" type="button"  class="btn btn-danger" style="width:100%">Cancelar</button>
                        </div>
                    </div>

                    <input type="hidden" name="action" id="action" value="editar_beneficio">
                    <input type="hidden" name="IdBeneficio" id="IdBeneficio" value=''>                    

                </form>
            </div>
        </div><!-- CIERRA FORM EDITAR BENEFICIO -->

IN ADVANCE THANK YOU FOR YOUR TIME