HtmlEditorExtender Ajax Control - Postback (asynchronous or not) Steal focus - page does not support scroll position
The code below has a link to trigger feedback (asynchronous or not) followed by a div with a top padding of 5000 :) - and a new HtmlEditorExtender control found in the Ajax Control Toolkit (4.1.51116).
Problem:
By clicking on the link at the top of the page, the HtmlEditorExtender will close the focus, scrolling all the way down.
Question:
Does anyone know if this is a known bug? Can anyone think of a job?
I can't even think of how to use this control on the page with any other controls that trigger a postback!
Code:
<div>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:LinkButton runat="server">test asynch postback - PLEASE DONT SCROLL DOWN!! :)</asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<div style="padding-top: 5000px">
Nooooooooooooooooooooooooo!!!!
<asp:TextBox ID="txtPageBody" TextMode="MultiLine" Width="200px" runat="server" />
<act:HtmlEditorExtender ID="htmlPageBody" runat="server" TargetControlID="txtPageBody" >
<Toolbar>
<act:Bold />
</Toolbar>
</act:HtmlEditorExtender>
</div>
</div>
HtmlEditorExtender should be added as a tag but has no reputation :)
source to share
override the function that steals focus from your page by removing the focus line:
if (Sys.Extended && Sys.Extended.UI && Sys.Extended.UI.HtmlEditorExtenderBehavior && Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype && Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype._editableDiv_submit) {
Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype._editableDiv_submit = function () {
//html encode
var char = 3;
var sel = null;
if (Sys.Browser.agent != Sys.Browser.Firefox) {
if (document.selection) {
sel = document.selection.createRange();
sel.moveStart('character', char);
sel.select();
}
else {
sel = window.getSelection();
sel.collapse(this._editableDiv.firstChild, char);
}
}
//Encode html tags
this._textbox._element.value = this._encodeHtml();
};
}
from here:
source to share
Not sure how to fix this correctly, or why this is happening in the first place, but here's a dirty workaround.
1. Add this script
<script type="text/javascript" language="javascript">
function pageLoad() {
// if we did not redefined the '__doPostBack' method yet
if (typeof window.__doPostBack_original == "undefined") {
// save the original method
window.__doPostBack_original = window.__doPostBack;
// redefine it
window.__doPostBack = function (eventTarget, eventArgument) {
document.getElementById('<%=hdnLastFocus.ClientID %>').value = eventTarget;
var retval = window.__doPostBack_original(eventTarget, eventArgument);
return retval;
};
}
window.onload = document.getElementById('<%=hdnLastFocus.ClientID %>').focus();
}
</script>
2. Remove UpdatePanel
3. Add this hidden field
<asp:HiddenField ID="hdnLastFocus" runat="server" />
Hope this helps ... :)
PS Focus was stolen before postback and then returned after returning after returning, so if the editor control is far from the current focus it looks ugly because the screen jumps from one to the other and back again. But if your page is relatively small in height, it might suit your needs.
source to share