PDA

View Full Version : [CLOSED] Visual Errors for Two text fields with SelectOnFocus = true



stratadev
Jan 09, 2014, 10:25 PM
Hello,

Using the code below, there is visual errors when SelectOnFocus is set to true for textfields. This only happens in Chrome. To reproduce:

1. Click on Field B.
2. Click anywhere outside your browser.
3. Click on Field A. (Right away, without having to click on the active browser)

I'm using ExtJS version 4.2.1.883 with Ext.net version 2.2.0.




<html>
<head id="Head1" runat="server">
<title>The Test Page </title>
<script type="text/javascript">
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" Namespace="" />
<ext:Panel ID="Panel1" runat="server" Title="Text Fields with Select On Focus" Width="800"
Height="600" Layout="FormLayout">
<Items>
<ext:TextField runat="server" FieldLabel="Field A" Text="Example Text" SelectOnFocus="true">
</ext:TextField>
<ext:TextField runat="server" FieldLabel="Field B" SelectOnFocus="true">
</ext:TextField>
</Items>
</ext:Panel>
</form>
</body>
</html>

Daniil
Jan 10, 2014, 3:30 AM
Hi @stratadev,

Seems I cannot reproduce anything strange.

What are the visual errors? Could you, please, post a screenshot?

stratadev
Jan 10, 2014, 2:47 PM
Hi Daniil,

It's hard to explain so i've attached a video. Note I click on Field B, then outside, then Field A. on Chrome. I've uploaded the AVI file here since this forum doesn't allow video uploads.

http://tinypic.com/r/iyefpv/5

Daniil
Jan 13, 2014, 3:54 AM
Thank you, reproduced. It is a known issue:
https://github.com/extnet/Ext.NET/issues/313

Please try this fix:

Fix

Ext.form.field.Text.override({
beforeFocus : function(){
var me = this,
inputEl = me.inputEl,
emptyText = me.emptyText,
isEmpty;

Ext.form.field.Text.superclass.beforeFocus.apply(t his, arguments);

if ((emptyText && !Ext.supports.Placeholder) && (inputEl.dom.value === me.emptyText && me.valueContainsPlaceholder)) {
me.setRawValue('');
isEmpty = true;
inputEl.removeCls(me.emptyCls);
me.valueContainsPlaceholder = false;
} else if (Ext.supports.Placeholder) {
me.inputEl.removeCls(me.emptyCls);
}

if (me.selectOnFocus || isEmpty) {
inputEl.dom.select();
}
}
});