[CLOSED] HTMLEditor "stealing" focus

I am trying to create a form with an HTMLeditor on it and no matter what I set in the config it (the editor) steals focus on page load from the text fields at that are in front of it.

Any suggestions of how I can set the focus to the text box on the line above the HTMLEditor and then ideally allow the user to "tab" into the Editor.

HTML Code:

<%@ Page Language="C#" %> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { if (!X.IsAjaxRequest) { this.HtmlEditor1.Text = "<b>Some Initial HTML. You can edit it and submit to server.</b>"; } } protected void Submit(object sender, DirectEventArgs e) { X.Msg.Alert("Submit", "The following has been submitted:<br/><br/>" + this.HtmlEditor1.Text).Show(); } </script> <!DOCTYPE html> <html> <head runat="server"> <title>HtmlEditor - Ext.NET Examples</title> <link href="/resources/css/examples.css" rel="stylesheet" /> </head> <body> <form runat="server"> <ext:ResourceManager runat="server" /> <h1>HtmlEditor</h1> <ext:TextField runat="server" ID="txtEmailSubject" LabelAlign="Right" FieldLabel="Subject" AllowBlank="false" AutoFocus="true" TabIndex="1" MaxWidth="790" AutoFitErrors="true" BlankText="Please enter a subject" MsgTarget="Side" /> <ext:HtmlEditor ID="HtmlEditor1" runat="server" Width="600" EnableAlignments="false" EnableFontSize="false" CreateLinkText="My CreateLinkText"> <ButtonTips> <BackColor Text="My BackColor Tip" /> <Bold Text="My Bold Tip" /> </ButtonTips> </ext:HtmlEditor> <ext:Button runat="server" Text="Submit" OnDirectClick="Submit" /> </form> </body> </html>

Thanks in advance,

Yes, your example showcases a ...stubborn editor!
Can you please try and place the fields inside a FormPanel?

I can (since that is how I am using it) but it makes no difference in the behavior so went for a minimalist approach in my example.

Here is an example using a formpanel:

HTML Code:

<%@ Page Language="C#" %> <script runat="server"> protected void Submit(object sender, DirectEventArgs e) { X.Msg.Alert("Submit", "The following has been submitted:<br/><br/>" + this.HtmlEditor1.Text).Show(); } </script> <!DOCTYPE html> <html> <head runat="server"> <title>HtmlEditor - Ext.NET Examples</title> <link href="/resources/css/examples.css" rel="stylesheet" /> </head> <body> <form runat="server"> <ext:ResourceManager runat="server" /> <h1>Greedy Editor</h1> <ext:FormPanel runat="server" Title="The focus shoud be in the subject field" Width="800" BodyPadding="5" Layout="ColumnLayout"> <FieldDefaults LabelAlign="Left" MsgTarget="Side" /> <Items> <ext:TextField runat="server" ID="txtEmailSubject" LabelAlign="Right" FieldLabel="Subject" AllowBlank="false" AutoFocus="true" TabIndex="1" MaxWidth="790" AutoFitErrors="true" BlankText="Please enter a subject" MsgTarget="Side" /> <ext:HtmlEditor ID="HtmlEditor1" runat="server" Width="600" AutoFocus="false" EnableAlignments="false" EnableFontSize="false" CreateLinkText="My CreateLinkText"> </ext:HtmlEditor> </Items> <Buttons> <ext:Button runat="server" Text="Submit" OnDirectClick="Submit" /> </Buttons> </ext:FormPanel> </form> </body> </html>

Do note that the focus is being set correctly but then it is "stolen" by the HTMLEditor and that is triggering the validation on the textfield.

I even tried putting it in a different panel to no avail:

HTML Code:

<%@ Page Language="C#" %><script runat="server"> protected void Submit(object sender, DirectEventArgs e) { X.Msg.Alert("Submit", "The following has been submitted:<br/><br/>" + this.HtmlEditor1.Text).Show(); } </script> <!DOCTYPE html> <html> <head runat="server"> <title>HtmlEditor - Ext.NET Examples</title> <link href="/resources/css/examples.css" rel="stylesheet" /> </head> <body> <form runat="server"> <ext:ResourceManager runat="server" /> <h1>Greedy Editor</h1> <ext:FormPanel runat="server" Title="The focus shoud be in the subject field" Width="800" BodyPadding="5" Layout="ColumnLayout"> <FieldDefaults LabelAlign="Left" MsgTarget="Side" /> <Items> <ext:TextField runat="server" ID="txtEmailSubject" LabelAlign="Right" FieldLabel="Subject" AllowBlank="false" AutoFocus="true" TabIndex="1" MaxWidth="790" AutoFitErrors="true" BlankText="Please enter a subject" MsgTarget="Side" /> </Items> </ext:FormPanel> <ext:Panel runat="server" Width="800" BodyPadding="5" FocusOnToFront="false" Layout="ColumnLayout"> <Items> <ext:HtmlEditor ID="HtmlEditor1" runat="server" Width="600" FocusOnToFront="false" AutoFocus="false" EnableAlignments="false" EnableFontSize="false" CreateLinkText="My CreateLinkText"> </ext:HtmlEditor> </Items> <Buttons> <ext:Button runat="server" Text="Submit" OnDirectClick="Submit" /> </Buttons> </ext:Panel> </form> </body> </html>

Hello everybody,

Yes, HtmlEditor is quite capricious sometimes. I can suggest to try the following.

Example

Code:

<%@ Page Language="C#" %> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { if (!X.IsAjaxRequest) { this.HtmlEditor1.Text = "<b>Some Initial HTML. You can edit it and submit to server.</b>"; } } protected void Submit(object sender, DirectEventArgs e) { X.Msg.Alert("Submit", "The following has been submitted:" + this.HtmlEditor1.Text).Show(); } </script> <!DOCTYPE html> <html> <head runat="server"> <title>Ext.NET v2 Example</title> <script> Ext.form.field.HtmlEditor.override({ initComponent: function() { this.callParent(arguments); this.originalFocus = this.focus; this.focus = Ext.emptyFn; } }); </script> <script> var onInitialize = function() { App.TextField1.focus(); this.focus = this.originalFocus; }; </script> </head> <body> <form runat="server"> <ext:ResourceManager runat="server" /> <ext:TextField ID="TextField1" runat="server" /> <ext:HtmlEditor ID="HtmlEditor1" runat="server"> <Listeners> <Initialize Fn="onInitialize" /> </Listeners> </ext:HtmlEditor> <ext:Button runat="server" Text="Submit" OnDirectClick="Submit" /> </form> </body> </html>

In a futile attempt to outsmart this greedy control I disabled it and added some code to re enable it if conditions were met.
I then discovered that even if it is disabled the focus is set and you can type in the "text area".

Based on this I suspect it is actually a bug and not a behaviour.

Code:

<%@ Page Language="C#" %><script runat="server"> protected void Submit(object sender, DirectEventArgs e) { X.Msg.Alert("Submit", "The following has been submitted:<br/><br/>" + this.HtmlEditor1.Text).Show(); } </script> <!DOCTYPE html> <html> <head runat="server"> <title>HtmlEditor - Ext.NET Examples</title> <link href="/resources/css/examples.css" rel="stylesheet" /> </head> <body> <form runat="server"> <ext:ResourceManager runat="server" /> <h1>Greedy Editor</h1> <ext:FormPanel runat="server" ID="frmPanel" Title="The focus shoud be in the subject field" Width="800" BodyPadding="5" Layout="ColumnLayout"> <FieldDefaults LabelAlign="Left" MsgTarget="Side" /> <Items> <ext:TextField runat="server" ID="txtEmailSubject" LabelAlign="Right" FieldLabel="Subject" AllowBlank="false" AutoFocus="true" TabIndex="1" MaxWidth="790" AutoFitErrors="true" EnableKeyEvents="true" BlankText="Please enter a brief subject" MsgTarget="Side" ValidateOnBlur="true" SelectOnFocus="true"> <Listeners> <KeyUp Handler="#{HtmlEditor1}.setDisabled(!#{frmPanel}.isValid());" /> </Listeners> </ext:TextField> <ext:HtmlEditor ID="HtmlEditor1" runat="server" Border="true" MaxWidth="790" TabIndex="2" Disabled="true" CreateLinkText="My CreateLinkText"> </ext:HtmlEditor> </Items> <Buttons> <ext:Button runat="server" Text="Submit" OnDirectClick="Submit" /> </Buttons> </ext:FormPanel> </form> </body> </html>

Hi Daniil,

Thanks for your example.

I plugged it into my page and it worked in IE11 and Firefox but not in Chrome.

I then realized I was still manually setting focus into my TextField in the codebehind on page load and that was causing Chrome to act weird. Once I deleted this code it all worked perfectly.

Thanks again.

I am posting the updated example with the annotated offending code for the benefit of others.

HTML Code:

<%@ Page Language="C#" %> <script runat="server"> protected void Submit(object sender, DirectEventArgs e) { X.Msg.Alert("Submit", "The following has been submitted:<br/><br/>" + this.txtHtmlComments.Text).Show(); } protected void Page_Load(object sender, EventArgs e) { txtEmailSubject.Focus(); //remove this and all is well. } </script> <!DOCTYPE html> <html> <head runat="server"> <title>HtmlEditor - Ext.NET Examples</title> <link href="/resources/css/examples.css" rel="stylesheet" /> <script type="text/javascript"> Ext.form.field.HtmlEditor.override({ initComponent: function () { this.callParent(arguments); this.originalFocus = this.focus; this.focus = Ext.emptyFn; } }); </script> <ext:XScript runat="server"> <script type="text/javascript"> var txtHtmlComments_onInitialize = function () { #{txtEmailSubject}.focus(); this.focus = this.originalFocus; }; </script> </ext:XScript> </head> <body> <form runat="server"> <ext:ResourceManager runat="server" /> <h1>Greedy Editor</h1> <ext:FormPanel runat="server" ID="frmPanel" Title="The focus shoud be in the subject field" Width="800" BodyPadding="5" Layout="FormLayout"> <Items> <ext:TextField runat="server" ID="txtEmailSubject" LabelAlign="Right" FieldLabel="Subject" AllowBlank="false" TabIndex="1" MaxWidth="790" AutoFitErrors="true" EnableKeyEvents="true" BlankText="Please enter a brief subject" MsgTarget="Side" ValidateOnBlur="true" SelectOnFocus="true"> </ext:TextField> <ext:HtmlEditor ID="txtHtmlComments" runat="server" Border="true" MaxWidth="790" TabIndex="2" CreateLinkText="My CreateLinkText"> <Listeners> <Initialize Fn="txtHtmlComments_onInitialize" /> </Listeners> </ext:HtmlEditor> </Items> <Buttons> <ext:Button runat="server" Text="Submit" OnDirectClick="Submit" /> </Buttons> </ext:FormPanel> </form> </body> </html>