[WASM] DataGrid turns blank by tabbing on bottom cells

[paulovila]

Current behavior

Given a Datagrid with rows (some of them not visible unless it is scrolled) .
Start editing a cell , press Tab key several times to focus on the next cell.
after the last visible row, it starts displaying a blank overlay, see video.

DataGridTabBlank.mp4

When focusing on the next cell which is a not visible column, it should scroll horizontally to display the cell . If the focusing column is wider than the Grid's width, the column should align to the very left of the DataGrid. If the focusing column is narrower than the DataGrid, then the very right of the column should be aligned to the very right of the DataGrid.
See video:

DataGridTabBlank2.mp4

Expected behavior

Changing focus on the DataGrid cells should behave similarly as WinUI

How to reproduce it

Source UnoApp6.zip

Works on UWP/WinUI

Yes

Affected platforms

WebAssembly

[Youssef1313]

This appears to be specific to Chromium.

[cwhitlatch]

@Youssef1313 any work-around we can employ?

[darenm]

@jeromelaban Do we have any progress on workarounds we can try here?

[jeromelaban]

@darenm we have not yet found any reliable workaround for this issue, we're continuing to look into it.

[darenm]

We shall take a look in our use-case and report back.

[Xiaoy312]

Sorry for the incorrect information above. I rushed to conclusion.
The issue can still happen with the latest next/version, when Uno.Material is involved. Likely this is due to our handling of virtualization/scrolling with the significant difference of height between a normal cell and an edit-mode cell:

• TextBlock at 17px [actually 32px from DataGridCell.MinHeight]; vs
• TextBox at 58px.

You can workaround this issue, by either using the default fluent style or using an EditingElementStyle that is similar in size:

<tc:DataGrid ...>
	<tc:DataGrid.Resources>
		<!-- method1: force fluent style within the control -->
		<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />

	<tc:DataGrid.Columns>
		<tc:DataGridTextColumn ...>
			<tc:DataGridTextColumn.EditingElementStyle>
				<!-- method2: use an EditingElementStyle that results in a similar size than the ElementStyle -->
				<Style TargetType="TextBox">
					<Setter Property="MaxHeight" Value="32" />
					<!-- rest of the style... -->
				</Style>

---

As for the incorrect column snapping, I suspect it has the same root cause. One of the observation that I've made is that when the column has already expanded from entering edit-mode once, the snapping issue no longer occurs. The hypothesis here is that, on tab focusing change, we first perform a scroll-into-view with the column's normal width, and then resizing it for edit-mode... For this, the same fluent style trick will not work as they still have a width difference. But, you can workaround this by hardcoding a width for the column:

<tc:DataGridTextColumn Width="120" MaxWidth="120" ... />

[Xiaoy312]

The blank/black bar at the bottom issue is fixed in #15354 which is available in Uno 5.2.
If you need the fix for an earlier version Uno, please let us know.

---

As for the column snapping issue, it a general problem with DataGrid, even on windows. We are working on a fix for this now.

[Xiaoy312]

updated repro sample with other heads: u14311.zip