Opened 10 years ago

Closed 9 years ago

Last modified 7 years ago

#10170 closed defect (fixed)

readOnly in Chrome makes text fields invisible

Reported by: mark007 Owned by: Douglas Hays
Priority: high Milestone: 1.4
Component: Dijit Version: 1.4.0b
Keywords: Cc:
Blocked By: Blocking:

Description

Hi,

An input textfield that I have set to readOnly appears fine in firefox, ie etc. In google chrome version 4.0.222.2, the text I might enter into this field becomes pure white, therefore invisible (unless I select the text with my cursor).

<input type="text" id="bla" name="bla" dojotype="dijit.form.ValidationTextBox?" class="input" readOnly="true"/>

This bug can be deleted if version 4 won't be supported. I havn't had time to test in version 3, sorry.

Attachments (3)

10170.jpg (94.4 KB) - added by Douglas Hays 9 years ago.
screen shot showing it working on Chrome 3.0 (WinXP)
a1.png (110.6 KB) - added by cabu 7 years ago.
In blank
a2.png (184.5 KB) - added by cabu 7 years ago.
With text

Download all attachments as: .zip

Change History (20)

comment:1 Changed 9 years ago by Douglas Hays

problem is also in safari 4

comment:2 Changed 9 years ago by Douglas Hays

Owner: set to Douglas Hays
Priority: lowhigh
Status: newassigned

regression caused by [17314]

comment:3 Changed 9 years ago by Douglas Hays

Owner: changed from Douglas Hays to Eugene Lazutkin
severity: normalmajor
Status: assignednew

The regression is actually caused by [20284]. I still had my dojo/ directory set to [20283] while debugging #10169.

comment:4 Changed 9 years ago by Eugene Lazutkin

Resolution: fixed
Status: newclosed

Should be fixed in [20665], but I don't know how to test. Please reopen if it fails.

comment:5 Changed 9 years ago by bill

Resolution: fixed
Status: closedreopened

[20655] fixed the button problem, but not this one. I don't think this problem is related to dojo.declare(), it's simply picking up the rule from Common.css, from [17314]:

.dj_webkit .tundra .dijitTextBoxReadOnly,
.dj_webkit .tundra .dijitComboBoxReadOnly,
.dj_webkit .tundra .dijitSpinnerReadOnly,
.dj_webkit .tundra .dijitTextAreaReadOnly,
.dj_webkit .tundra .dijitTextBoxDisabled,
.dj_webkit .tundra .dijitComboBoxDisabled,
.dj_webkit .tundra .dijitSpinnerDisabled,
.dj_webkit .tundra .dijitTextAreaDisabled {
	color: #eee;
}

#eee is near white so naturally it's near invisible.

Test case is at end of test_validate.html.

The disabled test (euro-currency) in test_validate.html looks fine, but that's because it's a ValidationTextBox rather than a plain TextBox so the .dijitTextBoxDisabled class is applied to the <div> surrounding the <input> rather than the <input> itself. So I suspect that disabled TextBox's in webkit are also broken.

Looks like the culprit is [14181] where this rule was added in the first place. I guess it's no longer needed?

comment:6 Changed 9 years ago by bill

Owner: changed from Eugene Lazutkin to Douglas Hays
Status: reopenednew

comment:7 Changed 9 years ago by Douglas Hays

Resolution: fixed
Status: newclosed

(In [20670]) Fixes #10170. Change WebKit? INPUT/TEXTAREA disabled/readonly CSS rules to match non-WebKit? behavior. Moved these common CSS rules from themes/*/form/Common.css to dijit.css since they address a browser quirk and not a theme difference.

comment:8 Changed 9 years ago by mark007

Resolution: fixed
Status: closedreopened

Hi,

I have downloaded the latest dojo 1.4 nightly, from 20 of November. This bug isn't fixed. In chromium 4 the text in all of my readOnly fields are still invisible.

I am using soria theme.

<link rel=stylesheet href="../../TEP/dojo/latest/dijit/themes/soria/soria.css" type="text/css">
    <link rel=stylesheet href="../../TEP/dojo/latest/dojo/resources/dojo.css" type="text/css">

Changed 9 years ago by Douglas Hays

Attachment: 10170.jpg added

screen shot showing it working on Chrome 3.0 (WinXP)

comment:9 Changed 9 years ago by Douglas Hays

Resolution: fixed
Status: reopenedclosed

dijit only supports Chrome 3.0, not Chromium 4, but it sounds like you should file a bug report with Google.

comment:10 Changed 9 years ago by mark007

Resolution: fixed
Status: closedreopened

Yes the page below also works fine with readOnly in Chrome 4 beta using dojo 1.3. I don't think its a google bug therefore, but a dojo 1.4 bug. I guess this ticket should stay opened but for a future release that will support chrome 4?

http://sfoster.dojotoolkit.org/release/1.3.0/dijit/tests/form/test_validate.html

Re-close of course if you like, but I would rather see it be moved to be "fixed" for maybe dojo 1.5 as its not seen in dojo 1.3

comment:11 Changed 9 years ago by bill

I'm running Chrome 4.0.223.16 on WinXP and on http://download.dojotoolkit.org/release-1.4.0b2/dojo-release-1.4.0b2/dijit/tests/form/test_validate.html?theme=soria I can see the readonly field fine. Is it invisible for you? If test_validate.html?theme=soria works for you then you need to attach a test case which fails.

comment:12 Changed 9 years ago by mark007

Ok cheers.

My text field is created as a dijit.form.ValidationTextBox?

index.php

<html>
    <title>Test Page</title>
    <link rel=stylesheet href="../../TEP/dojo/latest/dijit/themes/soria/soria.css" type="text/css">
    <link rel=stylesheet href="../../TEP/dojo/latest/dojo/resources/dojo.css" type="text/css">
        <body class="soria">
                <input type="text" class="input" value="See me?" id="user_email" name="user_email" dojoType="dijit.form.ValidationTextBox" required="true" readOnly />
        </body>
        <script TYPE="text/javascript" src="../../TEP/dojo/latest/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
    <script TYPE="text/javascript" src="functions_test.js"></script>
</html>

functions.js

dojo.require("dijit.form.Textarea");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dojo.parser");

Chromium 4.0.254.0

comment:13 Changed 9 years ago by mark007

I confirm its only with ValidationTextBox?, doesn't happen when I create it as just a TextBox?. Thanks.

comment:14 Changed 9 years ago by bill

I do see the text being near invisible on Chrome 3 and Chrome 4, for tundra and soria. Looks like [20670] didn't properly address ValidationTextBox.

Mark - BTW in the future please attach test cases using the "Attach File" button.

comment:15 Changed 9 years ago by Douglas Hays

Resolution: fixed
Status: reopenedclosed

(In [20870] Fixes #10170. Adjust webkit CSS for disabled/readonly textboxes. Added manual testing buttons to test_validate.html, test_Spinner.html, and _autoComplete.html to validate correct rendering.

Changed 7 years ago by cabu

Attachment: a1.png added

In blank

Changed 7 years ago by cabu

Attachment: a2.png added

With text

comment:16 Changed 7 years ago by cabu

im having a similiar problem with dijit/themes/claro/claro.css in chromium 18.0.1025 I post 2 images. With and without mark Fixing using this rule. #twitter_address { color: grey; }

Last edited 7 years ago by cabu (previous) (diff)

comment:17 Changed 7 years ago by bill

@cabu, if you can make a test case that fails with the latest code then please submit a new bug report and attach the test case.

Note: See TracTickets for help on using tickets.