microsoft / microsoft/react-native-windows
Popups do not render correctly in RTL mode
Nobody has claimed this yet.
- 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
- Have the system enter Right to left text flow direction mode
- Create a component that renders a popup with no specified anchor, such that it becomes anchored to the app window.
- Make sure the popup that is rendered with width and height of the app window.
- 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.

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.

Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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