Search bar doesn't remove grey text when you click in the textbox

RESOLVED INVALID

Status

()

Firefox
Search
RESOLVED INVALID
6 years ago
6 years ago

People

(Reporter: Chris Sherlock, Unassigned)

Tracking

15 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

6 years ago
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:15.0) Gecko/20100101 Firefox/15.0
Build ID: 20120824154833

Steps to reproduce:

When you click on the Findbar textbox, then it should actually remove the grey text "Google". 


Actual results:

It doesn't remove the grey text that reads "Google". 


Expected results:

It should blank the Findbar textbox.
(Reporter)

Comment 1

6 years ago
Note that this seems to be something that started happening in Firefox 15, was OK in v14.
Component: Untriaged → Search
(Reporter)

Updated

6 years ago
Summary: Findbar doesn't remove greyed out text when you click in the textbox → Findbar doesn't remove grey text when you click in the textbox
It was an intentional change, but I can't find the bug :(
Bug 786630 made this change so that users can read placeholder text when a blank field is focused.  This behaviour is similar to the Windows 7 start menu search box.
Blocks: 673873
OS: Windows 7 → All
Hardware: x86_64 → All
Whiteboard: [wontfix?]
This is working as intended.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → INVALID
Summary: Findbar doesn't remove grey text when you click in the textbox → Search bar doesn't remove grey text when you click in the textbox
Whiteboard: [wontfix?]
Duplicate of this bug: 786805

Comment 6

6 years ago
It seems unnatural and wrong to me, to show the placeholder even when the box is focused.

So I added these styles to my userChrome.css and userContent.css to force the placeholder to disappear. It works for the search box, URL bar and any web page content (inputs or textareas) that use placeholders:

userChrome.css
==============
.textbox-input:-moz-placeholder:focus,
.textbox-textarea:-moz-placeholder:focus
{
color: transparent !important;
}

userContent.css
===============
input:-moz-placeholder:focus,
textarea:-moz-placeholder:focus
{
color: transparent !important;
}

Comment 7

6 years ago
This change was made in in bug 673873.
Component: Search → Find Toolbar
Product: Firefox → Toolkit
Component: Find Toolbar → Search
Product: Toolkit → Firefox
Duplicate of this bug: 787753

Comment 9

6 years ago
(In reply to Matthew N. [:MattN] from comment #3)
> This behaviour is similar to the Windows 7 start
> menu search box.

No, in Windows 7 start menu search box, when you click, the placeholder disappears.
(In reply to ithinc from comment #9)
> (In reply to Matthew N. [:MattN] from comment #3)
> > This behaviour is similar to the Windows 7 start
> > menu search box.
> 
> No, in Windows 7 start menu search box, when you click, the placeholder
> disappears.

Note that I said "similar", but I do see the difference now.  I was referring to the behaviour on the initial focus where the caret and placeholder text are both shown.
Duplicate of this bug: 787829

Comment 12

6 years ago
To me, this is counter intuitive. If it was an intended change, I think it was a wrong change.

Comment 13

6 years ago
Complementing mjh563's comment #6, here's what I put in my CSS files for the dark themes I'm using in both Firefox and Thunderbird, where the then-transparent placeholder would leave back a text shadow [1]:

userChrome.css
==============
.textbox-input:-moz-placeholder:focus,
.textbox-textarea:-moz-placeholder:focus
{
color: transparent !important;
text-shadow: none !important;
}

userContent.css
===============
input:-moz-placeholder:focus,
textarea:-moz-placeholder:focus
{
color: transparent !important;
text-shadow: none !important;
}

Thank you everyone who fights back this nonsense "improvement" and provides and shares solutions to have the correct pre-15 behavior back! :)

[1] Solution found at: http://userstyles.org/styles/71930/firefox-15-hide-placeholders-on-focused-nodes

Comment 14

6 years ago
After spending hours after hours trying to figure out why the above solution worked in Thunderbird's GUI input boxes and also in input boxes on web pages seen in Firefox, but had suddenly stopped working for Firefox' search bar and address bar themselves, I accidentally found the solution that was right in front of my nose all along:

In userChrome.css, there must be a @namespace line with the following content:
@namespace url(http://www.w3.org/1999/xhtml);

There is already another @namespace line in userChrome.css (with "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" as url), and apparently the one with the w3.org URL must be put *after* the default @namespace line. I have no idea whether it is bad to have two of these lines, or if I could even simply remove the default one without breaking anything. Apart from the comment "Do not remove the @namespace line -- it's required for correct functioning" I couldn't find any documentation whatsoever on @namespace.

So, things seem to work as expected now (pre-15 placeholder behaviour for input boxes on web pages as well as within Firefox' and Thunderbird's GUI), but I don't assume any responsibility if things break. ;) Oh, and if you are able to enlighten me about this @namespace thingy, please, go ahead.

Anyway, I hope this might help others save long hours of pointless research and trial-and-error and insomnia and despair.
Duplicate of this bug: 821967
You need to log in before you can comment on or make changes to this bug.