fix: Workaround XAML bug with ComboBox and dark theme (#380)

react-native-picker · Mar 15, 2022 · 20cac25 · 20cac25
1 parent b823b7b
commit 20cac25
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/windows/ReactNativePicker/ReactPickerView.cpp b/windows/ReactNativePicker/ReactPickerView.cpp
@@ -8,6 +8,7 @@
 
 #include <winrt/Windows.Foundation.Metadata.h>
 #include <UI.Xaml.Input.h>
+#include <UI.Xaml.Media.h>
 
 namespace winrt {
     using namespace Microsoft::ReactNative;
@@ -50,6 +51,20 @@ namespace winrt::ReactNativePicker::implementation {
                     winrt::FocusManager::TryFocusAsync(comboBox, winrt::FocusState::Programmatic);
                 }
             });
+
+        // Workaround XAML bug with ComboBox and dark theme. Same as:
+        // https://github.com/microsoft/microsoft-ui-xaml/issues/2331    
+        m_dropDownOpenedRevoker = this->DropDownOpened(winrt::auto_revoke,
+            [](auto const& sender, auto const& /*args*/) {
+            auto comboBox = sender.as<xaml::Controls::ComboBox>();
+            if (comboBox.XamlRoot()) { // XamlRoot added in 19H1
+                auto comboBoxAsFrameworkElement = comboBox.XamlRoot().Content().try_as<xaml::FrameworkElement>();
+                auto popups = xaml::Media::VisualTreeHelper::GetOpenPopupsForXamlRoot(comboBox.XamlRoot());
+                for (auto const& popup : popups) {
+                    popup.Child().as<xaml::FrameworkElement>().RequestedTheme(comboBoxAsFrameworkElement.ActualTheme());
+                }
+            }
+        });
     }
 
     void ReactPickerView::UpdateProperties(winrt::IJSValueReader const& reader) {

diff --git a/windows/ReactNativePicker/ReactPickerView.h b/windows/ReactNativePicker/ReactPickerView.h
@@ -25,6 +25,7 @@ namespace winrt::ReactNativePicker::implementation {
         xaml::Media::Brush m_comboBoxColor{ nullptr };
         xaml::Controls::ComboBox::SelectionChanged_revoker m_selectionChangedRevoker{};
         xaml::Controls::ComboBox::DropDownClosed_revoker m_dropDownClosedRevoker{};
+        xaml::Controls::ComboBox::DropDownOpened_revoker m_dropDownOpenedRevoker{};
 
         void RegisterEvents();
         void RepopulateItems(winrt::Microsoft::ReactNative::JSValueArray const& items);