search

microsoft / react-native-windows

A framework for building native Windows apps with React.
https://microsoft.github.io/react-native-windows/
Other
16.26k stars 1.14k forks source link

Xaml islands setup: Devtools element inspector doesn't do anything #8328

Open paperbackdragon opened 3 years ago

paperbackdragon commented 3 years ago

Environment

Run the following in your terminal and copy the results here.

  1. npx react-native --version: 4.14.0
  2. npx react-native info: 
    System:
OS: Windows 10 10.0.22000
CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
Memory: 37.50 GB / 63.93 GB
Binaries:
Node: 12.22.3 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
AllowAllTrustedApps: Enabled
Versions: 10.0.17763.0, 10.0.18362.0, 10.0.19041.0
IDEs:
Android Studio: Version  4.1.0.0 AI-201.8743.12.41.7042882
Visual Studio: 16.10.31424.327 (Visual Studio Enterprise 2019)
Languages:
Java: Not Found
Python: 3.9.4 - C:\Python39\python.EXE
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.4 => 0.63.4
react-native-windows: 0.63.35 => 0.63.35
npmGlobalPackages:
*react-native*: Not Found

What SDK version are you building for? Choose from 10.0.15063, 10.0.16299, 10.0.19041, etc.

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

  1. Have your app set up with xaml islands
  2. With the app open, go into the window that's running metro and press "d" to open the developer window
  3. You should see this banner now, "Tap something to inspect it": MicrosoftTeams-image (13)-1
  4. Click around the app to try and inspect an element, and nothing happens

Expected Results

The inspector overlay should show information about the element and what styles are applied to it.

chrisglein commented 3 years ago

Confirmed this does work on a fresh 0.65 app without islands. So yeah, must be something about the combination of islands and the inspector. Needs investigation.

paperbackdragon commented 3 years ago

Just as another data point to help investigation -- I managed to upgrade to react-native-windows v0.64.14 today to make sure that wasn't the issue, and I'm running into the same problem where clicking the UI with the inspector open doesn't do anything (including, doesn't let me click things in the app or navigate around). So it's not just a 0.63 issue.

My guess is it's something about click events vs touch events? Or events not getting propagated correctly, in our setup with xaml islands.

taenri commented 2 years ago

I can confirm that this bug is also still present in 0.66.