2

Before I have asked a question about Chat Room Search Bar. Another issue I have found is in the same sequence. This time, when I refresh the page, the chat room search bar CSS style is not affected.

Look at the screen shot. This screen shot is taken after refreshing the page.

Enter image description here

But, it gets reset after focusing the cursor.

Enter image description here

My Firefox version is up to date, 27.0.1 and I am using Windows XP. This problem does not occur in Google Chrome.

Improve this question
5
  • Reproduced. Looks like a race condition of some kind. Really, though, the box should just be using a placeholder attribute instead of kluging it with JavaScript.
    – Ilmari Karonen
    Mar 6, 2014 at 0:52
  • Indeed, looks like the initRoomIndex() function is being called either too early or too late. I'd figure out which if the Firefox JS debugger would cooperate with me. :-(
    – Ilmari Karonen
    Mar 6, 2014 at 1:02
  • 1
    Ps. I found another bug: if you type the exact placeholder text ("filter rooms", or "search" for the top-bar search box) into the box yourself and click somewhere else and then back in the box, the text is wiped off. On the positive side, I'm pretty sure I can fix this whole mess fairly easily in SOUP, if the devs don't get around to it first.
    – Ilmari Karonen
    Mar 6, 2014 at 1:05
  • @IlmariKaronen you are right the entered text cleared when box focused back. But, this issue does not occur in Ask Question Question Title Box. When i have typed "What's your bug, feature request, or meta-discussion topic? Be specific." in the Question Title Box then it doesn't get disappeared on focused back. Why they have used different method for Search Box and Question Title Box?
    – Shell
    Mar 6, 2014 at 3:26
  • Chat and the actual Q&A sites use completely different JavaScript code. This bug is specific to the chat JS.
    – Ilmari Karonen
    Mar 6, 2014 at 8:02

1 Answer 1

Reset to default
4

As I noted in the comments above, the root cause of this bug is that the chat search boxes don't use proper HTML5 placeholder attributes, but instead kluge it in JavaScript by altering the content and styling of the search boxes "on the fly". This klugy implementation is prone to all sorts of bugs, of which you've found one above.

Specifically, the reason this particular problem happens on Firefox is that, when you reload the page, Firefox prefills the input boxes based on their previous values. In particular, Firefox remembers that the room search box used to contain the text "filter rooms", and prefills it with that text. The chat JavaScript then sees this prefilled text and decides that, since the box is not empty, it should not be given the pseudo-placeholder style.

(The reason it doesn't happen to the top bar search box is that, apparently, Firefox treats its pseudo-placeholder string "search" as a special case, and won't try to prefill it. I'd guess that this special case was added specifically to avoid breaking too many klugy scripts like this.)

Anyway, I've added some code to SOUP v1.10 that will replace these pseudo-placeholders with real ones. In case you're curious, here's what it looks like:

$('#searchbox, #search').off('focus blur').attr( 'placeholder', function () {
    var $this = $(this);
    if ( $this.closest('#roomsearch').length ) return 'filter rooms';
    else if ( $this.closest('#usersearch').length ) return 'filter users';
    else return 'search';
} ).filter('.watermark').val('').removeClass('watermark');

As you might note, this is really yet another kluge piled on top of the existing kluge, but it seems to work.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .