TokenizingTextBox crashes when its width is unknown

[AndrewKeepCoding]

Describe the bug

These cases work:

<StackPanel Orientation="Vertical">
    <toolkit:TokenizingTextBox />
</StackPanel>

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <toolkit:TokenizingTextBox />
</Grid>

but these cases throw System.Runtime.InteropServices.COMException:

<StackPanel Orientation="Horizontal">
    <toolkit:TokenizingTextBox />
</StackPanel>

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <toolkit:TokenizingTextBox />
</Grid>

To avoid the TokenizingTextBox to crash in the cases above, you need to set the Width or the MaxWidth.

Steps to reproduce

Create a blank WinUI 3 app project and use the code above.

Expected behavior

TokenizingTextBox should work with StackPanels with Horizontal Orientation.

Screenshots

No response

Code Platform

• [ ] UWP
• [X] WinAppSDK / WinUI 3
• [ ] Web Assembly (WASM)
• [ ] Android
• [ ] iOS
• [ ] MacOS
• [ ] Linux / GTK

Windows Build Number

• [ ] Windows 10 1809 (Build 17763)
• [ ] Windows 10 1903 (Build 18362)
• [ ] Windows 10 1909 (Build 18363)
• [ ] Windows 10 2004 (Build 19041)
• [ ] Windows 10 20H2 (Build 19042)
• [ ] Windows 10 21H1 (Build 19043)
• [ ] Windows 10 21H2 (Build 19044)
• [ ] Windows 10 22H2 (Build 19045)
• [ ] Windows 11 21H2 (Build 22000)
• [X] Other (specify)

Other Windows Build number

Windows 11 23H2 (Build 22631.2715)

App minimum and target SDK version

• [ ] Windows 10, version 1809 (Build 17763)
• [ ] Windows 10, version 1903 (Build 18362)
• [ ] Windows 10, version 1909 (Build 18363)
• [ ] Windows 10, version 2004 (Build 19041)
• [ ] Windows 10, version 2104 (Build 20348)
• [ ] Windows 11, version 22H2 (Build 22000)
• [ ] Other (specify)

Other SDK version

No response

Visual Studio Version

2022

Visual Studio Build Number

No response

Device form factor

No response

Additional context

Seems to be related to CommunityToolkit/Labs-Windows#425.

Help us help you

Yes, I'd like to be assigned to work on this item.

[VectorTetra]

Here is reproduction of the bug

UniformGridUnoIssue.zip

[xperiandri]

@michael-hawker we've uploaded the repro for easier triage

[AndrewKeepCoding]

@michael-hawker I can take a look at this issue if no one has been assigned yet.

[michael-hawker]

@AndrewKeepCoding thanks, that's great! 🦙❤️ We haven't had time to dig into this with all the other infrastructure stuff we had been doing. Part of me based on another mention I received recently is wondering if it has to do anything with the underlying WrapPanel. Let us know if you dig anything else up.

[AndrewKeepCoding]

@michael-hawker I guess you are right. It breaks when the WrapPanel needs to stretch its las child and is given an infinity width. This simple block of code throws the same exception:

<StackPanel Orientation="Horizontal">
    <toolkit:WrapPanel StretchChild="Last">
        <Button Content="1" />
    </toolkit:WrapPanel>
</StackPanel>

[Jay-o-Way]

Hey @AndrewKeepCoding, I see you use the term "infinite width", but * doesn't mean "infinite". It means "stretch using equal space" and that can be seen by something like <Grid ColumnDefinitions="1*, 3*">. This means: the second column must be three times the size of the first. In other words: two columns, 25% and 75% width of the total. When you have only one column, and one child element, that means the Grid is stretched horizontally, so the child is actually correctly stretching its last item.

[Jay-o-Way]

When you say <toolkit:TokenizingTextBox />, there is no content at all, right? Is this even valid? Isn't that the logical issue in the first place? Or did you simply omit any content for brevity of this example?

[AndrewKeepCoding]

⚠️ Hey @AndrewKeepCoding, I see you use the term "infinite width", but * doesn't mean "infinite". It means "stretch using equal space" and that can be seen by something like <Grid ColumnDefinitions="1*, 3*">. This means: the second column must be three times the size of the first. In other words: two columns, 25% and 75% width of the total. When you have only one column, and one child element, that means the Grid is stretched horizontally, so the child is actually correctly stretching its last item.

I answered this on your other comment.🙂

When you say <toolkit:TokenizingTextBox />, there is no content at all, right? Is this even valid? Isn't that the logical issue in the first place? Or did you simply omit any content for brevity of this example?

The TokenizingTextBlock breaks with content or no content.