microsoft / microsoft/react-native-windows

Popups do not render correctly in RTL mode

Open
#4,432 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area: Flyout Area: Layout Area: Popup Area: RTL bug Workstream: Component Parity
Dominant language
C++
Stars
17.3k
Forks
1.2k
Avg merge
1d 13h
Merged PRs (30d)
33

Description

Environment

react-native-cli: 2.0.1
react-native: 0.60.6

System:
OS: Windows 10 10.0.18363
CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
Memory: 15.66 GB / 31.93 GB
Binaries:
Node: 10.15.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.16.0 - C:\Users\davchi\AppData\Roaming\npm\yarn.CMD
npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.60.6 => 0.60.6
react-native-windows: 0.60.0-vnext.150 => 0.60.0-vnext.150
rnpm-plugin-windows: 0.3.5 => 0.3.5
Installed UWP SDKs:
10.0.17763.0
10.0.18362.0

  • Target Device: Desktop
  • Visual Studio Version 2017
  • Build Configuration: Debug & Release
Steps to Reproduce
  1. Have the system enter Right to left text flow direction mode
  2. Create a component that renders a popup with no specified anchor, such that it becomes anchored to the app window.
  3. Make sure the popup that is rendered with width and height of the app window.
  4. Have the popup appear and observe
Expected Behavior

The popup since it is anchored to the app window and is the height and width of the app window should appear and cover over the app window.
image

Actual Behavior

The popup appears translated by the screen width to left hand of the screen. See screen cap. The content inside the popup correctly adheres to the RTL flow direction-- it is just that it appears in the incorrect location.
image

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No source file or test is named. Start by reproducing the popup behavior on Windows with react-native-windows 0.60.0-vnext.150 while the system uses RTL flow, then trace the popup positioning path. Done means an app-window-anchored popup with matching app dimensions covers the app window instead of being shifted left.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native
Domain
desktop
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.