Page MenuHomePhabricator

The username suggestion list appears outside the Reply tool's text input area in RTL
Closed, ResolvedPublic

Description

Testing the tool on Arabic Wikipedia, something strange is happening when I tried to ping someone using @: the suggestion list is outside the box and in the wrong side.

Capture d'écran Deepin_zone de sélection _20200530015234.png (595×1 px, 136 KB)
I had to zoom out a little bit to read the list.

Event Timeline

Change 601432 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[VisualEditor/VisualEditor@master] ve.ui.CompletionWidget: Fix positioning in RTL

https://gerrit.wikimedia.org/r/601432

You might find it interesting that when measuring the position of some text on screen, the 'right' property refers to "the right coordinate" (or in other words, position of the right edge relative to the left edge of the container), but when defining the position of some element in CSS, the 'right' property refers to "the distance between the element's right edge and the right edge of its containing block" (or in other words, position of the right edge relative to the right edge of the container).

This bug is caused by confusing the two when trying to align the right edge of the suggestion popup with the right edge of the text you typed ;)

Change 601432 merged by jenkins-bot:
[VisualEditor/VisualEditor@master] ve.ui.CompletionWidget: Fix positioning in RTL

https://gerrit.wikimedia.org/r/601432

Change 602180 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (b7f83c6ba)

https://gerrit.wikimedia.org/r/602180

Change 602180 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (b7f83c6ba)

https://gerrit.wikimedia.org/r/602180

matmarex renamed this task from The username suggestion list appears outside the Reply tool's text input area to The username suggestion list appears outside the Reply tool's text input area in RTL.Jun 4 2020, 11:36 AM