Results 1 to 1 of 1

Thread: EmptyText CSS Style is rendered wrong in TextFields and TextAreas

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext GWT Premium Member
    Join Date
    Apr 2011
    Posts
    6
    Vote Rating
    0
      0  

    Default EmptyText CSS Style is rendered wrong in TextFields and TextAreas

    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


    1. Start running the attached project
    2. Open app in browser
    3. 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
    Code:
    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:
    Code:
    ...@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>");
    }
    ...
    com.sencha.gxt.theme.base.client.field.TextAreaDefaultAppearance:
    Code:
    ...
    @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>");
    }
    ...
    Attached Files Attached Files

Similar Threads

  1. [OPEN] The setUI method does not work for TextFields and TextAreas
    By Trevor4001 in forum Ext JS 6.x Bugs
    Replies: 1
    Last Post: 1 Sep 2016, 11:28 AM
  2. Replies: 3
    Last Post: 11 Sep 2012, 6:55 AM
  3. Replies: 2
    Last Post: 24 May 2012, 10:39 AM
  4. TextFields and EmptyText
    By Aessaya in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 27 Apr 2011, 6:50 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •