7

Something seems amiss on chat.stackexchange.com, where typing in the "Find a Stack Exchange Community" search field under the Stack Exchange dropdown does nothing. There is also some strange overlap going on with the magnifying glass and the type.

Red freehand circle emphasizing broken feature

7
  • No repro Firefox 90.0 64bit on win 10, nor Version 91.0.4472.124 (Official Build) (64-bit) on win 10. – A Rogue Ant. Jul 20 at 19:13
  • 1
    Able to reproduce, as you point out, only on chat sites, not main sites. – Sonic the Anonymous Hedgehog Jul 20 at 19:14
  • Chrome 91.0.4472.114 Win 10 and not working on my mobile either – curious Jul 20 at 19:14
  • @SonictheAnonymousHedgehog Yes it's strictly from chat.stackexchange.com as mentioned in the question (which is probably why it hadn't been noticed) – curious Jul 20 at 19:15
  • Repro'd on chrome on android as well. – Luuklag Jul 20 at 19:19
  • My above comment, the 91 bit should have said Chrome 91.0.4472.124, sorry. – A Rogue Ant. Jul 20 at 19:22
  • 4
    Note that chat uses the entirely old-style top bar and was never updated when everything else was... – Mithical Jul 20 at 19:52
3

On the JS issue

It seems like there is a discrepancy between the page JavaScript and the markup. If one inspects the main.js file served, they will find that it uses a typeWatch jQuery plugin to initialize the search input during the afterLoad lifecycle hook.

The problem is that the script expects to find an element matching a #js-site-filter-txt (id selector) whereas the search input only has a class js-site-filter-txt set which means that the correct selector should've been .js-site-filter-txt.

And indeed, if you have a userscript manager or use local overrides to override the file, the search starts working as expected:

search input fixed with local overrides

If you want to fix it in the script file, here is the block you need to look for (alternatively, you can add the id to the input, but be aware that the dialog is loaded via an AJAX request for a server rendered HTML):

"afterLoad": function() {
                   // 👇 problem #1
  this.$dialog.find("#js-site-filter-txt").typeWatch({
      "highlight": !1,
      "wait": 250,
      "captureLength": -1,
      "callback": $.proxy(this.filterSites, this)
    }),
    this.$searchItems = this.$dialog.find(".js-other-sites li").clone().map(function() {
      return {
        "title": $(".site-icon", this).attr("title").toLowerCase(),
        "description": $(".site-desc", this).text().toLowerCase(),
        "hostname": $("a", this).first().attr("href"),
        "li": this
      }
    });
  var e = this.$dialog;
                    // 👇 problem #2
  this.$dialog.find("#js-site-filter-txt").focus(function() {
      var t = e.offset().top + e.height(),
        n = e.find(".other-sites li:nth-child(2)"),
        i = n.offset().top + n.height();
      i > t && e.animate({
        "scrollTop": e.scrollTop() + i - t
      }, 750)
    }),
    this.supr()
},

Here is a miniature userscript for fixing the broken input on the fly (both the JavaScript and CSS part [see below on the latter]):

Install URL Repository

// ==UserScript==
// @author          Oleg Valter
// @description     Fix chat search input without having to wait 6 to 8 weeks
// @grant           none
// @homepage        https://github.com/userscripters/chat-search-fixup#readme
// @match           https://chat.stackexchange.com
// @match           https://chat.stackoverflow.com
// @name            chat-search-fixup
// @namespace       userscripters
// @source          git+https://github.com/userscripters/chat-search-fixup.git
// @supportURL      https://github.com/userscripters/chat-search-fixup/issues
// @version         1.0.0
// ==/UserScript==

(function(w, d) {
    'use strict';

    const searchClass = "js-site-filter-txt";

    w.addEventListener("load", () => {
        $.ajaxSetup({
            converters: {
                "text html": (data) => data.replace(
                    new RegExp(`(<input)(.+class=".*?)\s?${searchClass}`, "g"),
                    `$1 id="${searchClass}"$2`
                )
            }
        });
    });

    const style = d.createElement("style");
    d.head.append(style);
    const { sheet } = style;
    if(!sheet) return;

    [
        `.s-input.s-input__search,
         .s-input.s-input__creditcard {
           padding-left: 32px !important;
           box-sizing: border-box;
        }`
    ].forEach((rule) => sheet.insertRule(rule));

})(window, document);

On the CSS issue

The search icon is an SVG element with the position rule set to absolute via the .s-input-icon ruleset. That's how it is supposed to be in the new design. What is amiss here, however, is a padding-left rule that would shift the placeholder attribute. The ruleset from the Stacks design is as follows:

.s-input.s-input__creditcard, 
.s-input.s-input__search {
  padding-left: 32px;
}

The above ruleset is also present in the stylesheet served by chat.* subdomain, except that the padding-left rule is overridden with a padding rule from a ruleset with higher specificity:

.topbar input[type="text"] {
    transition: none;
    border: 1px solid #cbcbcb;
    font-size: 100%;
    font-family: var(--ff-sans);
    border-radius: 0;
    padding: 3px; // our culprit
    margin: 5px 0 5px 0;
}

But before fixing the issue, one has to address another problem. If one is to add an inline padding-left override, they will observe the input sticking out (overflowing) the modal on the right:

input overflowing the modal right side

This is due to the box-sizing rule being set to content-box which only includes the content dimensions (margins, padding, and borders are, therefore, excluded). Changing the rule to border-box gives us the desired result:

input with the fixed border-box rule

Since border-box is the default (and normally unchanged) rule value, where does it come from? It turns out that the stylesheet has the following ruleset applied to the <body> element propagating down to the search input:

body {
    box-sizing: content-box;
}

Give it 6 to 8 weeks. In the meantime, you can force the rule with !important (dirty, but it's not like Stacks don't use it too) and add a rule overriding the inherited box-sizing:

.s-input.s-input__search, .s-input.s-input__creditcard {
    padding-left: 32px !important;
    box-sizing: border-box;
}

And voila (add width/margin adjustments to your taste):

search input with overrides applied

You must log in to answer this question.

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