PDA

View Full Version : EmptyText CSS Style is rendered wrong in TextFields and TextAreas



mbuchholzer
7 Feb 2017, 5:41 AM
Version(s) of GXT
GXT 4.0.2

Browser versions and OS
(and desktop environment, if applicable)


Firefox 51, Windows 10
Chrome 55, Windows 10


Virtual Machine
No

Description
A TextField with an EmtyText on which the value is set empty, the gray text style is not removed after the next text inputs.


Run mode
both

Steps to reproduce the problem



Start running the attached project
Open app in browser
Enter text into the TextFields and the TextAreas


Expected result
The text in the TextField/TextArea is rendered with the color black.

Actual result
The text is rendered grey like the empty text.

Test case and Workaround


package com.mySampleApplication.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.google.gwt.safehtml.shared.SafeHtmlUtils;
import com.google.gwt.user.client.ui.RootPanel;
import com.sencha.gxt.cell.core.client.form.FieldCell;
import com.sencha.gxt.cell.core.client.form.TextAreaInputCell;
import com.sencha.gxt.cell.core.client.form.TextInputCell;
import com.sencha.gxt.core.client.GXT;
import com.sencha.gxt.core.client.util.Size;
import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer;
import com.sencha.gxt.widget.core.client.form.*;

public class MySampleApplication implements EntryPoint
{
public class TextFieldDefaultAppearance extends com.sencha.gxt.theme.base.client.field.TextFieldDefaultAppearance
{
private com.sencha.gxt.theme.base.client.field.TextFieldDefaultAppearance.TextFieldResources resources;
private com.sencha.gxt.theme.base.client.field.TextFieldDefaultAppearance.TextFieldStyle style;

public TextFieldDefaultAppearance()
{
this((com.sencha.gxt.theme.base.client.field.TextFieldDefaultAppearance.TextFieldResources) GWT.create(com.sencha.gxt.theme.base.client.field.TextFieldDefaultAppearance.TextFieldResources.class));
}

public TextFieldDefaultAppearance(com.sencha.gxt.theme.base.client.field.TextFieldDefaultAppearance.TextFieldResources resources)
{
super(resources);
this.resources = resources;
this.style = this.resources.css();
}

@Override
public void render(SafeHtmlBuilder sb, String type, String value, FieldCell.FieldAppearanceOptions options)
{
String inputStyles = "";
String wrapStyles = "";
int width = options.getWidth();
String name = options.getName() != null ? " name=\'" + options.getName() + "\' " : "";
String disabled = options.isDisabled() ? "disabled=true" : "";
String placeholder = options.getEmptyText() != null ? " placeholder=\'" + SafeHtmlUtils.htmlEscape(options.getEmptyText()) + "\' " : "";
boolean empty = false;
if ((value == null || value.equals("")) && options.getEmptyText() != null)
{
if (GXT.isIE8() || GXT.isIE9())
{
value = options.getEmptyText();
}

empty = true;
}

if (width != -1)
{
wrapStyles = wrapStyles + "width:" + width + "px;";
width = this.adjustTextAreaWidth(width);
inputStyles = inputStyles + "width:" + width + "px;";
}

String cls = this.style.text() + " " + this.style.field();

// if(empty) {
// cls = cls + " " + this.style.empty();
// }
String ro = options.isReadonly() ? " readonly" : "";
value = SafeHtmlUtils.htmlEscape(value);
sb.appendHtmlConstant("<div style=\'" + wrapStyles + "\' class=\'" + this.style.wrap() + "\'>");
sb.appendHtmlConstant("<input " + name + disabled + " value=\'" + value + "\' style=\'" + inputStyles + "\' type=\'" + type + "\' class=\'" + cls + "\'" + ro + placeholder + ">");
sb.appendHtmlConstant("</div>");
}
}

public class TextAreaDefaultAppearance extends com.sencha.gxt.theme.base.client.field.TextAreaDefaultAppearance
{
private com.sencha.gxt.theme.base.client.field.TextAreaDefaultAppearance.TextAreaResources res;
private com.sencha.gxt.theme.base.client.field.TextAreaDefaultAppearance.TextAreaStyle style;

public TextAreaDefaultAppearance()
{
this((com.sencha.gxt.theme.base.client.field.TextAreaDefaultAppearance.TextAreaResources) GWT.create(com.sencha.gxt.theme.base.client.field.TextAreaDefaultAppearance.TextAreaResources.class));
}

public TextAreaDefaultAppearance(com.sencha.gxt.theme.base.client.field.TextAreaDefaultAppearance.TextAreaResources resources)
{
super(resources);
this.res = resources;
this.style = this.res.css();
}

@Override
public void render(SafeHtmlBuilder sb, String value, FieldCell.FieldAppearanceOptions options)
{
int width = options.getWidth();
int height = options.getHeight();
boolean empty = false;
String name = options.getName() != null ? " name=\'" + options.getName() + "\' " : "";
String disabled = options.isDisabled() ? " disabled=true" : "";
String ro = options.isReadonly() ? " readonly" : "";
String placeholder = options.getEmptyText() != null ? " placeholder=\'" + SafeHtmlUtils.htmlEscape(options.getEmptyText()) + "\' " : "";
if ((value == null || value.equals("")) && options.getEmptyText() != null)
{
if (GXT.isIE8() || GXT.isIE9())
{
value = options.getEmptyText();
}

empty = true;
}

if (width == -1)
{
width = 150;
}

String inputStyles = "";
String wrapStyles = "";
Size adjusted = this.adjustTextAreaSize(width, height);
if (width != -1)
{
wrapStyles = wrapStyles + "width:" + width + "px;";
width = adjusted.getWidth();
inputStyles = inputStyles + "width:" + width + "px;";
}

if (height != -1)
{
height = adjusted.getHeight();
inputStyles = inputStyles + "height: " + height + "px;";
}

String cls = this.style.area() + " " + this.style.field();

// if(empty) {
// cls = cls + " " + this.style.empty();
// }
if (options instanceof TextAreaInputCell.TextAreaCellOptions)
{
TextAreaInputCell.TextAreaCellOptions opts = (TextAreaInputCell.TextAreaCellOptions) options;
inputStyles = inputStyles + "resize:" + opts.getResizable().name().toLowerCase() + ";";
}

sb.appendHtmlConstant("<div style=\'" + wrapStyles + "\' class=\'" + this.style.wrap() + "\'>");
sb.appendHtmlConstant("<textarea " + name + disabled + " style=\'" + inputStyles + "\' type=\'text\' class=\'" + cls + "\'" + ro + placeholder + ">");
sb.append(SafeHtmlUtils.fromString(value));
sb.appendHtmlConstant("</textarea></div>");
}
}


/**
* This is the entry point method.
*/
public void onModuleLoad()
{
VerticalLayoutContainer verticalLayoutContainer = new VerticalLayoutContainer();

TextField originalTextField = new TextField();
originalTextField.setEmptyText("Original");
originalTextField.setValue("");

verticalLayoutContainer.add(new FieldLabel(originalTextField, "Original TextField"));

TextField fixedTextField = new TextField(new TextInputCell(new TextFieldDefaultAppearance()));
fixedTextField.setEmptyText("Fixed");
fixedTextField.setValue("");

verticalLayoutContainer.add(new FieldLabel(fixedTextField, "Fixed TextField"));

TextArea originalTextArea = new TextArea();
originalTextArea.setEmptyText("Original");
originalTextArea.setValue("");

verticalLayoutContainer.add(new FieldLabel(originalTextArea, "Original TextArea"));

TextArea fixedTextArea = new TextArea(new TextAreaInputCell(new TextAreaDefaultAppearance()));
fixedTextArea.setEmptyText("Fixed");
fixedTextArea.setValue("");

verticalLayoutContainer.add(new FieldLabel(fixedTextArea, "Fixed TextArea"));

for (FieldLabel fieldLabel : FormPanelHelper.getFieldLabels(verticalLayoutContainer))
fieldLabel.setLabelAlign(FormPanel.LabelAlign.TOP);

RootPanel.get().add(verticalLayoutContainer);
}
}




Debugging already done
yes

Possible fix

com.sencha.gxt.theme.base.client.field.TextFieldDefaultAppearance:


[email protected]
public void render(SafeHtmlBuilder sb, String type, String value, FieldCell.FieldAppearanceOptions options)
{
String inputStyles = "";
String wrapStyles = "";
int width = options.getWidth();
String name = options.getName() != null ? " name=\'" + options.getName() + "\' " : "";
String disabled = options.isDisabled() ? "disabled=true" : "";
String placeholder = options.getEmptyText() != null ? " placeholder=\'" + SafeHtmlUtils.htmlEscape(options.getEmptyText()) + "\' " : "";
boolean empty = false;
if ((value == null || value.equals("")) && options.getEmptyText() != null)
{
if (GXT.isIE8() || GXT.isIE9())
{
value = options.getEmptyText();
}

empty = true;
}

if (width != -1)
{
wrapStyles = wrapStyles + "width:" + width + "px;";
width = this.adjustTextAreaWidth(width);
inputStyles = inputStyles + "width:" + width + "px;";
}

String cls = this.style.text() + " " + this.style.field();

// if(empty) {
// cls = cls + " " + this.style.empty();
// }

String ro = options.isReadonly() ? " readonly" : "";
value = SafeHtmlUtils.htmlEscape(value);
sb.appendHtmlConstant("<div style=\'" + wrapStyles + "\' class=\'" + this.style.wrap() + "\'>");
sb.appendHtmlConstant("<input " + name + disabled + " value=\'" + value + "\' style=\'" + inputStyles + "\' type=\'" + type + "\' class=\'" + cls + "\'" + ro + placeholder + ">");
sb.appendHtmlConstant("</div>");
}
...


com.sencha.gxt.theme.base.client.field.TextAreaDefaultAppearance:


...
@Override
public void render(SafeHtmlBuilder sb, String value, FieldCell.FieldAppearanceOptions options)
{
int width = options.getWidth();
int height = options.getHeight();
boolean empty = false;
String name = options.getName() != null ? " name=\'" + options.getName() + "\' " : "";
String disabled = options.isDisabled() ? " disabled=true" : "";
String ro = options.isReadonly() ? " readonly" : "";
String placeholder = options.getEmptyText() != null ? " placeholder=\'" + SafeHtmlUtils.htmlEscape(options.getEmptyText()) + "\' " : "";
if ((value == null || value.equals("")) && options.getEmptyText() != null)
{
if (GXT.isIE8() || GXT.isIE9())
{
value = options.getEmptyText();
}

empty = true;
}

if (width == -1)
{
width = 150;
}

String inputStyles = "";
String wrapStyles = "";
Size adjusted = this.adjustTextAreaSize(width, height);
if (width != -1)
{
wrapStyles = wrapStyles + "width:" + width + "px;";
width = adjusted.getWidth();
inputStyles = inputStyles + "width:" + width + "px;";
}

if (height != -1)
{
height = adjusted.getHeight();
inputStyles = inputStyles + "height: " + height + "px;";
}

String cls = this.style.area() + " " + this.style.field();

// if(empty) {
// cls = cls + " " + this.style.empty();
// }

if (options instanceof TextAreaInputCell.TextAreaCellOptions)
{
TextAreaInputCell.TextAreaCellOptions opts = (TextAreaInputCell.TextAreaCellOptions) options;
inputStyles = inputStyles + "resize:" + opts.getResizable().name().toLowerCase() + ";";
}

sb.appendHtmlConstant("<div style=\'" + wrapStyles + "\' class=\'" + this.style.wrap() + "\'>");
sb.appendHtmlConstant("<textarea " + name + disabled + " style=\'" + inputStyles + "\' type=\'text\' class=\'" + cls + "\'" + ro + placeholder + ">");
sb.append(SafeHtmlUtils.fromString(value));
sb.appendHtmlConstant("</textarea></div>");
}
...