TokenizingTextBox remaining issues

[michael-hawker]

Describe the bug

Follow-ons from #3247 review.

• P1 Figure out how to isolate our custom style from WinUI style changes - Michael

  • Extra padding below tokens in style (looks like TextBox is pushing box taller?) - @JustinXinLiu I haven't been able to figure out where this is from as it was working ok in our test environment, would you have time next week to take a look? Thanks!
  • This could also be the textbox's vertical alignment, but I've seen three different cases across different samples we've had, so I'm more confused now. Update I think this is due to extra styling being applied by having WinUI 2.x included in the package. I noticed in Update to WinUI 2.4 #3291 that WinUI 2.4 applied a border around the textbox, so there's a problem here of how we isolate our custom style from the WinUI updates.

• AutoSuggestBox sizing issue (wrap to 2nd line, then remove token, query icon is now clipped as autosuggestbox doesn't resize, calling update is ignored, can repro with standard AutoSuggestBox, did I file a WinUI issue? need to find workaround)? - Michael (apparently, this works fine with keyboard input, it's only when clicking the remove on the token with the mouse that it occurs???)

• Update code to use interface to do check for tokens vs. our specific implementation (i.e. replace PretokenStringContainer with ITokenStringContainer)?

• P2 E-mail sample doesn't work in Release Mode???

• P2 Keyboard token duplication issue

• When fixed height and scroll out of view, border is behind tokens (see image below)

• Update InterspersedObservableCollection to accept List

• P2 Rounded corners on Tokens/Box? (had issue importing WinUI styles for this with conditional xaml before)

• P2 Show red outline on text not parsed as token when focus lost

• P1 Expose a object[] Tokens and a string[] Text type properties? (do we need SelectedText as well?)

  • We should audit the properties and make sure we don't have 'extras' which are no longer used too.

• P1 Not enough padding on Right-side (partly issue with panels and ListView)

• Missing QueryIcon (forgot about this, that we need to update it to share or only have one on the last one.)

[michael-hawker]

For the release mode issue:

[michael-hawker]

Good news is that the People Picker was quick to test out with the new control:

It apparently didn't inherit from the control though, so we should modify that to better expose the collections/events directly. Will need to do that next for more testing.

You'll note in the screenshot though that the token alignment looks alright, but the textbox alignment is a bit high, which is different from the Sample App (so wondering if Sample App has a style that's interfering as well?)

[michael-hawker]

Just found out that the weird styling for the padding I was seeing was probably being inherited by changes made to styles in WinUI. We need to figure out how to isolate ourselves from these changes, as otherwise the control will look different if the developer is using WinUI in their project or not (as it's not required for the control, we just add it in to the Sample App).

This explains why it was looking fine in our test environment, but then suddenly looked different in the Sample App.

FYI @ranjeshj @stmoy

[mdtauk]

Don't forget to test these in a Dark Theme, as the Textboxes no longer remain in Light style when focused

[michael-hawker]

Thanks @mdtauk, I'm pretty sure I accounted for that already as part of another change to align to that update (as we have our own focus visuals mimicking that of a textbox). I'll double-check again though as I update the styles elsewhere.

[michael-hawker]

Have a solution for the WinUI padding, but hit another issue with how sizes of Icons work with styles (filed another issue here). Will need to think about how to work around this or possibly copy the resource around and listen for parent updates to modify...?

[michael-hawker]

Found a new issue with ScrollViewer clipping:

Might be because FocusVisual is behind the panel

[michael-hawker]

Huh, weird issue with filtering and keyboard in top sample box.

1. Type 'a'
2. Down Arrow
3. Select 'Account'
   4 Type 'a' again
4. Hit 'Enter'

Now have a duplicate item, of course if you then click the 'X' on the 2nd item the first item is removed (clearer if you add another different token between them, you can get the same repro). This also breaks keyboard navigation.

Not sure if this is because of how we're filtering or an issue with AutoSuggestBox itself or timing issue???

There should be someone to change the selection after filter?

[michael-hawker]

Thought I had a solution for the wrapping/icon issue when tokens are removed; however, it's only because it works fine with the keyboard. It only repros with the mouse for me. I did eliminate if Release mode made a difference, still reprod with the mouse.

[michael-hawker]

Layout issue:

When you click to remove a token:

(notice the icon isn't stretched, ignore the text being centered that's an issue with my attempt at a fix)

[michael-hawker]

Layout Issue is being resolved by #3319

[marcelwgn]

Can we add a little padding to the right of the text so it doesn't sit flush with the close button on hove:

[michael-hawker]

@marcpems any known issues being reported we should be aware of or has everything seemed good on your side?