I am having a problem with TinyMCE text editor inside a jQuery dialog. Whenever the text editor's textarea is focused and I unfocus it, the page scrolls to top of the dialog. This obviously only happens if the page is scrollable and the page is not currently scrolled to top. Occurs always with Firefox, sometimes with Chrome.
https://jsfiddle.net/dqrarcv3/
To test it, make sure the Result window is scrollable and not scrolled to top.
Steps to reproduce:
- Focus the text editor's textarea
- Click outside of it
Or
- Focus the text editor's textarea
- Click a contextmenu (ex. File)
- Hover over another contextmenu (ex. Edit)
Simplified HTML:
<div id="dialog">
<div style="height:100px">
Lorem ipsum lorem ipsum Lorem ipsum
lorem ipsum Lorem ipsum lorem ipsum
</div>
<textarea id="editor"></textarea>
</div>
Simplified JavaScript:
$(document).ready(function () {
$("#dialog").dialog({
autoOpen: true,
width: "auto",
position: {
my: "center top",
at: "center top",
of: window
},
modal: true
});
$("#editor").css("height", "250px");
tinymce.init({
selector: "#editor"
});
});
It seems that the unfocusing makes TinyMCE focus the dialog's close button which then makes the page scroll to it. If the dialog doesn't have any buttons but some input elements instead, it focuses on the first of them.
I have tracked down the place in TinyMCE code where this happens but commenting the function isn't fixing the problem.
d.on("focusout", function() {
console.log("FOCUSOUT");
window.setTimeout(function() {
var t = e.focusedEditor;
u(s()) || t != d || (d.fire("blur", {
focusedEditor: null
}), e.focusedEditor = null, d.selection && (d.selection.lastFocusBookmark = null))
}, 0)
})
Any ideas how to fix this odd behaviour or what is actually causing it?
EDIT:
Still having the same issue. Here's a gif of the issue: http://gfycat.com/SneakyImpartialAmazontreeboa
As seen there, the first focusable element within the dialog gets focused when the TinyMCE editor loses focus (by either clicking somewhere else or switching contextmenu). I added the "FOCUSOUT" console message to TinyMCE's source code but I still couldn't find what is causing it.
Exact code used in the gif above:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="/js/jquery-ui/css/redmond/jquery-ui-1.10.4.custom.css">
<script src="/js/jquery-1.10.2.js"></script>
<script src="/js/jquery-ui/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="/js/tinymce/tinymce.min.js"></script>
</head>
<body>
<div id="dialog">
<p>Lorem ipsum!</p>
<button>BUTTON</button>
<p>...text...</p>
<p>...text...</p>
<p>...text...</p>
<p>...text...</p>
<textarea id="editor" rows="5"></textarea>
</div>
<script>
$(document).ready(function()
{
$("#dialog").dialog(
{
autoOpen: true,
modal: true,
width: window.innerWidth / 1.75,
position: { my: "center top", at: "center top", of: window },
});
tinyMCE.init(
{
selector: "#editor"
});
$(".ui-dialog-titlebar").hide(); // Hide dialog titlebar
$(".ui-dialog").css("border", "1px solid black"); // Add border
});
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire