microsoft / microsoft/react-native-windows
Flyout does not support isOverlayEnabled when isLightDismissEnabled=true
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 17.3k
- Forks
- 1.2k
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 33
Description
Problem Description
When isLightDismissEnabled=false, isOverlayEnabled darkens the background, when light dismiss is true, the background is no longer darkened, if this is by design it should be mentioned in the API.
Steps To Reproduce
const { height, width } = useWindowDimensions();
<Flyout
isLightDismissEnabled={false}
isOverlayEnabled={true}
style={{ width: width, height: height }}
verticalOffset={height / 2}
horizontalOffset={width / 2}
pointerEvents={'auto'}
>
test
Expected Results
No response
CLI version
10.2.4
Environment
System:
OS: Windows 10 10.0.22621
CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
Memory: 3.09 GB / 15.77 GB
Binaries:
Node: 18.13.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
npm: 8.19.3 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
AllowAllTrustedApps: Enabled
Versions: 10.0.18362.0, 10.0.19041.0, 10.0.22000.0, 10.0.22621.0
IDEs:
Android Studio: AI-213.7172.25.2113.9123335
Visual Studio: 16.11.33529.622 (Visual Studio Community 2019), 17.6.33723.286 (Visual Studio Community 2022)
Languages:
Java: 17.0.6 - C:\Program Files\Eclipse Adoptium\jdk-17.0.6.10-hotspot\bin\javac.EXE
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.11 => 0.71.11
react-native-windows: 0.71.20 => 0.71.20
npmGlobalPackages:
*react-native*: Not Found
Target Platform Version
None
Target Device(s)
No response
Visual Studio Version
None
Build Configuration
None
Snack, code example, screenshot, or link to a repository
No response
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
Start by reproducing the reported Flyout example with react-native-windows 0.71.20, comparing isOverlayEnabled with isLightDismissEnabled set to true and false. Inspect the Flyout implementation and its API documentation; done means the overlay behavior is corrected or the interaction is explicitly documented, with a regression check for both settings.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- cpp, react-native
- Domain
- desktop, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 28/100