Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switch to MUX:TextCommandBarFlyout in XAML Islands proofing menu #8723

Merged
merged 8 commits into from
Oct 26, 2021
Merged

Switch to MUX:TextCommandBarFlyout in XAML Islands proofing menu #8723

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3e47d80
Switch to MUX:CommandBarFlyout in XAML Islands proofing menu
jonthysell Sep 28, 2021
b568ada
Change files
jonthysell Sep 28, 2021
ba00bb2
Added focus workaround
jonthysell Sep 28, 2021
31784f0
fix build
jonthysell Sep 28, 2021
e04dfc5
Update vnext/Microsoft.ReactNative/Utils/XamlIslandUtils.cpp
jonthysell Sep 28, 2021
5746fdb
fix build
jonthysell Sep 28, 2021
6effc55
Merge branch 'muxcbf' of https://github.com/jonthysell/react-native-w…
jonthysell Sep 28, 2021
30e593a
Merge branch 'main' into muxcbf
jonthysell Oct 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/react-native-windows-77e0d25a-8269-4693-8568-96ba49675a87.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "Switch to MUX:CommandBarFlyout in XAML Islands proofing menu",
"packageName": "react-native-windows",
"email": "[email protected]",
"dependentChangeType": "patch"
}
15 changes: 12 additions & 3 deletions vnext/Microsoft.ReactNative/Utils/XamlIslandUtils.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,23 @@ struct CustomAppBarButton : xaml::Controls::AppBarButtonT<CustomAppBarButton> {
}
};

void FixProofingMenuCrashForXamlIsland(xaml::Controls::TextCommandBarFlyout const &flyout) {
void FixProofingMenuCrashForXamlIsland(xaml::Controls::Primitives::FlyoutBase const &flyout) {
flyout.Opening([](winrt::IInspectable const &sender, auto &&) {
const auto &flyout = sender.as<xaml::Controls::TextCommandBarFlyout>();
const auto &flyout = sender.as<winrt::Microsoft::UI::Xaml::Controls::TextCommandBarFlyout>();
if (const auto &textBox = flyout.Target().try_as<xaml::Controls::TextBox>()) {
const auto &commands = flyout.SecondaryCommands();
for (uint32_t i = 0; i < commands.Size(); ++i) {
if (const auto &appBarButton = commands.GetAt(i).try_as<xaml::Controls::AppBarButton>()) {
if (appBarButton.Flyout() == textBox.ProofingMenuFlyout()) {
if (!appBarButton.Flyout()) {
// This works around a loss of focus on the Proofing sub-menu when clicking on
// on the menu items.
// https://github.com/microsoft/microsoft-ui-xaml/issues/5818
appBarButton.Click([weakCommandBarFlyout = winrt::make_weak(cbf)](auto &&...) {
if (auto flyout = weakCommandBarFlyout.get()) {
Xaml::Input::FocusManager::TryFocusAsync(flyout.Target(), FocusState::Programmatic);
}
});
} else if (appBarButton.Flyout() == textBox.ProofingMenuFlyout()) {
// Replace the AppBarButton for the proofing menu with one that doesn't crash
const auto customAppBarButton = winrt::make<CustomAppBarButton>();
customAppBarButton.Label(appBarButton.Label());
Expand Down
6 changes: 4 additions & 2 deletions vnext/Microsoft.ReactNative/Utils/XamlIslandUtils.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,11 @@
#include <UI.Xaml.Controls.Primitives.h>
#include <UI.Xaml.Controls.h>

#include <winrt/Microsoft.UI.Xaml.Controls.h>

namespace Microsoft::ReactNative {

void FixProofingMenuCrashForXamlIsland(xaml::Controls::TextCommandBarFlyout const &flyout);
void FixProofingMenuCrashForXamlIsland(xaml::Controls::Primitives::FlyoutBase const &flyout);

template <typename T>
inline void EnsureUniqueTextFlyoutForXamlIsland(T const &textView) {
Expand All @@ -19,7 +21,7 @@ inline void EnsureUniqueTextFlyoutForXamlIsland(T const &textView) {
// to show the flyout on other windows cause the first window to get focus.
// https://github.com/microsoft/microsoft-ui-xaml/issues/5341
if (IsXamlIsland()) {
xaml::Controls::TextCommandBarFlyout flyout;
winrt::Microsoft::UI::Xaml::Controls::TextCommandBarFlyout flyout;
flyout.Placement(xaml::Controls::Primitives::FlyoutPlacementMode::BottomEdgeAlignedLeft);

// This works around a XAML Islands bug where the Proofing sub-menu for
Expand Down