microsoft / microsoft/react-native-windows
Creating a Popup with more than one child causes app to hit an assert in PopupShadowNode::AddView
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
Point of failure (index is 1)
void PopupShadowNode::AddView(ShadowNode &child, int64_t index) {
if (index != 0) {
assert(false);
return;
}
Callstack
> Microsoft.ReactNative.dll!Microsoft::ReactNative::PopupShadowNode::AddView(Microsoft::ReactNative::ShadowNode & child, __int64 index) Line 125 C++
Microsoft.ReactNative.dll!Microsoft::ReactNative::UIManagerModule::setChildren(__int64 containerTag, winrt::Microsoft::ReactNative::JSValueArray && reactTags) Line 316 C++
Microsoft.ReactNative.dll!Microsoft::ReactNative::UIManager::setChildren::__l2::<lambda_1>::operator()() Line 790 C++
Microsoft.ReactNative.dll!Mso::Details::FunctionObjectWrapper<`Microsoft::ReactNative::UIManager::setChildren'::`2'::<lambda_1>,void>::Invoke() Line 165 C++
Microsoft.ReactNative.dll!Mso::Functor<void __cdecl(void)>::operator()() Line 412 C++
[External Code]
Microsoft.ReactNative.dll!Microsoft::ReactNative::BatchingQueueCallInvoker::PostBatch::__l5::<lambda_1>::operator()() Line 46 C++
[External Code]
Microsoft.ReactNative.dll!Mso::React::MessageDispatchQueue2::tryFunc(const std::function<void __cdecl(void)> & func) Line 120 C++
Microsoft.ReactNative.dll!Mso::React::MessageDispatchQueue2::runOnQueue::__l2::<lambda_1>::operator()() Line 115 C++
Microsoft.ReactNative.dll!Mso::Details::FunctionObjectWrapper<`Mso::React::MessageDispatchQueue2::runOnQueue'::`2'::<lambda_1>,void>::Invoke() Line 166 C++
Microsoft.ReactNative.dll!Mso::QueueService::InvokeTask(Mso::Functor<void __cdecl(void)> && task, std::optional<std::chrono::time_point<std::chrono::steady_clock,std::chrono::duration<__int64,std::ratio<1,1000000000>>>> endTime) Line 208 C++
Microsoft.ReactNative.dll!Mso::TaskDispatcherHandler::Invoke() Line 173 C++
Steps To Reproduce
Here's the part of the code that produced this error:
function Section({children, title}: SectionProps): JSX.Element {
const [showPopup, setShowPopup] = React.useState(false);
return (
<View style={[styles.sectionContainer, styles.aiSection]}>
<View style={{flexDirection: 'row'}}>
<Text style={[styles.sectionTitle, {flexGrow: 1}]}>TITLE</Text>
<FeedbackButton content="👍" onPress={() => { setShowPopup(true); console.log("like"); }}/>
<FeedbackButton content="👎" onPress={() => { setShowPopup(true); console.log("dislike"); }}/>
<Popup isOpen={showPopup}>
<Text>Provide additional feedback</Text>
<TextInput></TextInput>
<Button title="Submit feedback" onPress={() => setShowPopup(false)}/>
</Popup>
</View>
{children}
</View>
);
}
There's a problem with this: Popup only expects 1 child, not a list of children. But this manifests as an assert instead of a clear error.
Expected Results
Not an assert (which in debug is just silently taking down the whole app - without attaching a debugger nothing is shown)
CLI version
error: unknown option '--version'
Environment
info Fetching system and libraries information...
System:
OS: Windows 10 10.0.23145
CPU: (24) x64 AMD Ryzen Threadripper PRO 3945WX 12-Cores
Memory: 38.63 GB / 63.86 GB
Binaries:
Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 9.4.1 - 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: Not Found
Visual Studio: 17.4.33213.308 (Visual Studio Community 2022), 16.11.33214.272 (Visual Studio Community 2019)
Languages:
Java: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.0 => 0.71.0
react-native-windows: 0.71.0 => 0.71.0
npmGlobalPackages:
*react-native*: Not Found
Target Platform Version
None
Target Device(s)
Desktop
Visual Studio Version
Visual Studio 2022
Build Configuration
Debug
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 locating PopupShadowNode::AddView and its caller UIManagerModule::setChildren. Reproduce the multi-child Popup case from the TSX example and replace the current assert behavior with a clear error or other non-assert failure. Done means the example no longer silently takes down the debug app when Popup receives multiple children.
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
- Mostly clear
- Newbie friendliness
- 45/100