Cursor misalignment in the categories box (Firefox)

Contribute Bug

AI-generated summary

Cursor Misalignment in Categories Box (Firefox)

A user reports a cursor misalignment issue in the categories box when using Firefox (dax). The cursor appears below the box when selecting a category. This issue is not present in Chrome or Edge.

Mittineague mentions a known “cursor drop” problem in Firefox, but laikoni suspects this bug is different, as it occurs on Windows 8 and has a greater offset.

laikoni provides screenshots and notes that the issue is unique to the topic search box and not present in the general search box. TechnoBear is unable to reproduce the issue on Ubuntu Gnome 16.04.

The issue persists in Firefox 49.0.1 (laikoni). sam suggests replacing the select2 component with an ember component for dropdowns, citing difficulties with localization and CSS. eviltrout agrees to replace select2, and sam assigns the task to joffreyjaffeux.

1

A little misalignment here on Meta (and in my forum too) when I use Firefox (latest version).

When you create a topic and click to choose a category the cursor appears under the box :

box.png443×298 12.9 KB

6 „Gefällt mir“
Send a notification when a topic is closed if a custom text is added
Composer bug on beta Firefox
2

Yes, Firefox has a known “cursor drop” problem.

https://meta.discourse.org/t/cursor-is-offset-in-firefox-linux-only-when-entering-tags/27073?u=mittineague

5 „Gefällt mir“
3

I suspect this bug is different from this Linux only bug:

  • I’m using Firefox on Windows 8 and have the same issue

  • The offset is much greater:
    more or less in the next line vs.

    Capture1.PNG483×123 10.2 KB
    in the same line but with missing padding

  • It’s happening only in the search box for topics and not in the otherwise pretty similar styled general search box

So while still being unique to Firefox (it’s not happening in Chrome or Edge) it also appears to be unique to the topic search box, so this might indicate that it’s also a discourse issue and not only a browser issue.

2 „Gefällt mir“
4

I can’t reproduce the misaligned cursor on search box anywhere. I’m using Firefox 47.0 on Ubuntu Gnome 16.04. Makes no difference if I open the box by keyboard or mouse; cursor is correctly placed.

1 „Gefällt mir“
5

I can reproduce the issue with Firefox (45.0.2) on an ArchLinux Gnome VM, on Windows I’m up-to-date with Firefox 47.0.1.

Also it should be noted that the cursor stays at this position even when typing something:

Pasted image521×160 8.63 KB

1 „Gefällt mir“
6

Just as a reminder, this bug still persists in Firefox 49.0.1 (now on Windows 10) and the latest discourse version.
Any new insights on this?

7

I think picking select2 was a very big historical mistake I would like us to rectify. Instead we should have an ember component for dropdowns that we can easily hack on. It would contain much less code, handle localizations in the same way the rest of our code does and be something we can extend. The CSS around select2 is a nightmare and we often find ourselves !importanting our way out.

Overall picking select2 was a very big mistake. If I had a time machine I would time machine it out.

https://github.com/discourse/discourse/pull/2333

cc @eviltrout

4 „Gefällt mir“
8

I’d be happy to replace it. The basic cases aren’t hard, but it does do some nice things like searching and stuff that we’d have to replicate.

I agree overall it would be less pain.

6 „Gefällt mir“
10

@j.jaffeux will be taking this as he replaces select2 with the new component :v:t4:

6 „Gefällt mir“
11

Fixed