microsoft / microsoft/react-native-windows

Flyout does not support isOverlayEnabled when isLightDismissEnabled=true

Open
#11,922 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area: Flyout bug Documentation Workstream: Component Parity
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

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.