WinUI 3's TeachingTip's close button doesn't work when binding Target to a control

[JasonWei512]

Describe the bug

In Windows App SDK 1.2, if you bind TeachingTip's Target to a control, when you click TeachingTip's close button, it won't close.

Steps to reproduce the bug

Reproduction project: WinUITeachingTipBug.zip

1. Bind TeachingTip's Target to a control

<Grid x:Name="TestGrid" />

<TeachingTip
    CloseButtonContent="Close"
    Content="Click the close button, this TeachingTip won't close"
    IsOpen="True"
    Target="{x:Bind TestGrid}" />

2. Click the close button, and the TeachingTip won't close.

3. If you remove Target="{x:Bind TestGrid}, it will work again.
   If you downgrade Windows App SDK from 1.2.221116.1 to 1.1.5, it will also work again

Expected behavior

When clicking the close button, the TeachingTip should close.

Screenshots

recordedVideo2022-11-18-211912.mp4

NuGet package version

WinUI 3 - Windows App SDK 1.2.1: 1.2.221116.1

Windows version

Windows 11 (22H2): Build 22621

Additional context

No response

[AdriaanLarcai]

We are experiencing the same issue in our application since upgrading to App SDK 1.2.

[MikeHillberg]

I'm seeing this too (I didn't try on pre-1.2). I worked around it by adding a delay before opening the tip (see 'bugbug' below). This tip is in code rather than your case of markup, but you're initializing IsOpen to true so likely the same issue.

var tip = new TeachingTip()
{
    Title = "...",
    Subtitle = "...",
    Target = _target
};

_root.Children.Add(tip);
tip.Closed += (_, __) => _root.Children.Remove(tip);

// bugbug: without this delay, the tip opens, but won't close
await Task.Delay(100);

tip.IsOpen = true;

[HEIC-to-JPEG-Dev]

I have this in SDK 1.3 preview as well

[pierrekhouryb]

I am having this issue as well, whether a target is bound or not.
I am using SDK 1.3.230502000.

[kmahone]

I've merged a fix for this in the internal repo. The fix will be available in a future release of Windows App SDK.

The issue is with setting IsOpen=True in the xaml file. This causes the IsOpen property to be set while the page is being parsed by the xaml parser. At this point the page has not yet been fully constructed or had a chance to lay out and render. So TeachingTip is trying to open before everything is ready and so it was hitting a few stumbling blocks. I've resolved the issue and it should work well now.

In order to work around the problem in current builds which do not have the fix, you can remove IsOpen=True from the xaml page and instead open it from code some time later. E.g. from the pages Loaded event handler.