# 提及建议列表框在 RTL 网站上的错误位置

**URL:** <https://meta.discourse.org/t/mention-suggestion-list-box-in-the-rtl-website-in-wrong-place/266763>\
**Category:** Bug\
**Created:** [2023年五月31日 12:36 UTC](https://meta.discourse.org/t/mention-suggestion-list-box-in-the-rtl-website-in-wrong-place/266763 "2023-05-31T12:36:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![hosna](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hosna/32/99969_2.png) [@hosna](https://meta.discourse.org/u/hosna)\
**Post date:** [2023年五月31日 12:36 UTC](https://meta.discourse.org/t/mention-suggestion-list-box-in-the-rtl-website-in-wrong-place/266763/1 "2023-05-31T12:36:30Z")

</div>

正如您在这张图片中看到的，它在窗口外面，我什么也看不见。

也许这与这个合并请求有关：

> <https://github.com/discourse/discourse/pull/21815>
>
> We currently have some CSS rules in \`common/base/rtl.scss\` that were added to wo…rkaround shortcomings of the R2 gem that we used to use to generate a version of our CSS that's suitable for RTL layouts. Those workarounds are mostly duplicate rules with the only difference being that they're flipped to suit RTL layouts.
> 
> However, we've recently replaced R2 with \`rtlcss\` which doesn't have those shortcomings of R2 (see https://github.com/discourse/discourse/commit/f94951147ea9d1c48ea68f0dabd568e70cb94674) which means those workarounds/duplicate rules need to be removed because they're getting flipped by \`rltcss\`, essentially reverting them to their original LTR version and causing issues with RTL layouts.
> 
> This PR removes those workarounds that are no longer needed, and cleans up the the file that contains our RTL-specific CSS.
> 
> Meta topic: https://meta.discourse.org/t/avatar-in-rtl-website-in-wrong-place/264676?u=osama.

@Osama

 ![image](https://global.discourse-cdn.com/meta/original/4X/0/0/9/009f08555e4185ed96fcfeb2a813d56c7ab1609c.jpeg)

---

<div class="post-metadata">

**Author:** ![olivia](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/olivia/32/324299_2.png) [@olivia](https://meta.discourse.org/u/olivia)\
**Post date:** [2023年五月31日 12:59 UTC](https://meta.discourse.org/t/mention-suggestion-list-box-in-the-rtl-website-in-wrong-place/266763/2 "2023-05-31T12:59:50Z")

</div>

要在 Discourse 中重现有关在从右到左 (RTL) 布局中提及建议列表框位置的问题，您可以按照以下步骤操作：

**优先级/严重性：** 中等 - 此错误会影响用户界面和用户体验，特别是对于使用 RTL 语言的用户。它不会破坏功能，但可能会导致使用困难。

**平台：** 在桌面、操作系统：Windows 10、浏览器：Google Chrome 上进行了测试。

**描述：** 在 Discourse 中，当启用了 RTL 语言，并且用户尝试提及另一位用户（通过键入“@”后跟用户名的开头）时，建议列表框会出现在可视窗口区域之外。此问题使用户无法看到用户名建议列表。

**重现步骤：**

1. 将 Discourse 设置为 RTL 语言设置。（您可以从管理员设置中进行设置。）
2. 以测试用户身份登录。
3. 导航到可以发表评论的任何主题。
4. 开始键入新帖子或回复，并尝试提及另一位用户（键入“@”后跟用户名的开头）。
5. 观察出现的提及建议列表框的位置。

---

<div class="post-metadata">

**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\
**Post date:** [2023年五月31日 14:11 UTC](https://meta.discourse.org/t/mention-suggestion-list-box-in-the-rtl-website-in-wrong-place/266763/3 "2023-05-31T14:11:56Z")

</div>

我今天升级了我5天前的实例后可以重现此问题，所以这可能与最近的提交有关 👍

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/c/e/5ce786d7bc07d0c9a69759b0b41c66cb880f4aab.png)

---

<div class="post-metadata">

**Author:** ![Osama](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/osama/32/98013_2.png) [@Osama](https://meta.discourse.org/u/Osama)\
**Post date:** [2023年六月2日 01:07 UTC](https://meta.discourse.org/t/mention-suggestion-list-box-in-the-rtl-website-in-wrong-place/266763/4 "2023-06-02T01:07:02Z")

</div>

感谢您报告此 bug，@hosna！这确实是最近出现的回归问题，此 PR 将会修复它：

> <https://github.com/discourse/discourse/pull/21905>
>
> Meta topic: https://meta.discourse.org/t/mention-suggestion-list-box-in-the-rtl-…website-in-wrong-place/266763?u=osama.
> 
> Our autocomplete box doesn't currently take into account the user's locale and places itself off-screen when using an RTL locale. This PR changes the placement logic for the autocomplete box when an RTL locale is used to make sure that:
> 
> 1. the autocomplete box's right side is near and to the left of the caret 
> 2. the autocomplete box doesn't go outside the composer's left side
> 
> Before:
> 
> \<img src="https://github.com/discourse/discourse/assets/17474474/71b375b3-6f05-49b5-a4ee-910a96010b53" width=500\>
> 
> After:
> 
> \<img src="https://github.com/discourse/discourse/assets/17474474/3209d8a0-16b4-45a1-953d-355c73ce3224" width=500\>
> 
> \<img src="https://github.com/discourse/discourse/assets/17474474/92215653-bdf0-49cd-b38d-13301c2a7adb" width=500\>
> 
> \<img src="https://github.com/discourse/discourse/assets/17474474/f4d157d8-6355-457d-9328-35620c450f6c" width=500\>

---

<div class="post-metadata">

**Author:** ![Osama](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/osama/32/98013_2.png) [@Osama](https://meta.discourse.org/u/Osama)\
**Post date:** [2023年六月5日 23:05 UTC](https://meta.discourse.org/t/mention-suggestion-list-box-in-the-rtl-website-in-wrong-place/266763/5 "2023-06-05T23:05:46Z")

</div>