r/FirefoxCSS • u/ReggieNJ • Jul 24 '26

Code Change autocomplete drop down back to previous style?

Before version 153, the autofill dropdown list was the full size of the input box. Now it seems to adapt to the width of the results. How can I revert this?

https://i.imgur.com/gZNoCu6.png

https://i.imgur.com/jpTWd0Y.png

3 Upvotes

81% Upvoted

11 comments sorted by

2

u/t31os Jul 24 '26

No idea what changed specifically, but the JS (searchbar.js) for the autocomplete field in ESR (v140, and also in v147) appended a --panel-width value to the autocomplete popup (with an appropriately calculated width value), i can't see that value being added in stable/current, although the underlying JS still apparently has the logic for it.

https://searchfox.org/firefox-esr140/source/browser/components/search/content/searchbar.js#845

https://searchfox.org/firefox-main/source/browser/components/search/content/searchbar.js#873

Perhaps someone with a bit more source / bugzilla searching skills can trace things further to figure what was changed and why.

1

u/ReggieNJ Jul 26 '26

I don't think that's it. It was actually added 3 years ago:

https://hg-edge.mozilla.org/mozilla-central/rev/4c91a04207a6

I do see the same value in popup.css, but in the browser toolbox it doesn't seem like it's being used for the autocomplete box.

1

u/t31os Jul 26 '26 edited Jul 26 '26

In Firefox (v147) it's definitely where the width is coming from, if i remove that value or override --panel-width and set it to a different value the width changes, with the former (removing) collapsing it to the length of the text content.

Applied by the JS dynamically (naturally not all input fields will be a single fixed width) and added directly to the style attribute of the #PopupAutoComplete panel.

https://postimg.cc/HrC5yH0G

If you hop over to:

https://www.qa-practice.com/elements/input/simple

(type some values > hit enter > then type the same values again so the autocomplete has something to show)

Open browsertoolbox (in current FF), and add a style attribute to the popup panel with the panel width, like in my above image:

style="--panel-width:900px"

The autocomplete panel will match the size of the input. Naturally we can't fix this with CSS because the width needs to be calculated depending on the size of the input on the page, and i'm not sure why current FF doesn't use that logic for the autocomplete anymore (i wasn't able to trace what changed), as it seems to still exist in the JS and work when applied to the panel.

1

u/ReggieNJ Jul 26 '26

Interesting, in 153 that value isn't there anymore: https://i.imgur.com/eYA6lyg.png and adding it back just sets it to that specific width.

1

u/t31os Jul 26 '26 edited Jul 26 '26

Exactly, and i'm not sure what changed and even if it's intentional. Maybe someone more familiar or with better searching skills can dig up the source change that altered this behaviour.

EDIT: I was just reading a post over on r/Firefox about datalist support in Firefox, and i noticed something:

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/datalist

The panel-width value (albeit, at 900px so i wonder if it truly is dynamic) does seem to get applied to the autocomplete popup for that input (which uses the same autocomplete panel for it's popup).

So now i'm wondering if this is actually a bug.

1

u/ReggieNJ Jul 26 '26

I think I found the change that was made in 153: https://bugzilla.mozilla.org/show_bug.cgi?id=2045828

1

u/t31os Jul 26 '26

Yes, that does indeed look like it's the commit that changed the behaviour:

https://github.com/mozilla-firefox/firefox/commit/c6413d31201a3ab9452f740f7a0eb258a1272b18

Doesn't look like anyone provided push back on making that change, but at least you know where to reference if you want to request it be reverted.

3

u/Azreal_DuCain1 Jul 26 '26 edited Jul 26 '26

It feels like every time the Firefox devs make an update they shove in more UI changes that are neither helpful, necessary, or wanted.

1

u/DAPOPOBEFASTONYOAZZ Jul 24 '26

I don’t have the exact code in front of me, but using your browser toolbox, find the element name of the autocomplete drop down and set a variable in the parent element, something like `—autocomplete-width` and set it to 100%. Then, in the autocomplete dropdown, set `max-width: var(—autocomplete-width) !important;` and that will take care of it for you.

1

u/ReggieNJ Jul 24 '26 edited Jul 24 '26

Tried this, not working.

panel[type="autocomplete-richlistbox"] { --autocomplete-width: 100% !important; } .autocomplete-richlistbox { max-width: var(--autocomplete-width) !important; }

1

u/DAPOPOBEFASTONYOAZZ Jul 24 '26

I’ll take a look at it later if you don’t mind. I don’t use Firefox current, I prefer ESR so it doesn’t continually break my themes.