[WASM] TextBlock text selection using double-click bleeds into other controls

[brookslindseyjr]

Current behavior

When selecting text via double-click, the selection highlight is also selecting adjacent text controls. This works on WinUI Desktop but not WASM. The behavior also seems different across different browsers. Firefox does not have this problem, but Edge and Chrome do.

Expected behavior

Double-clicking on a TextBlock should only select that text.

How to reproduce it (as minimally and precisely as possible)

Drop this on a page and double-click on one of the TextBlocks:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"/>
        <ColumnDefinition Width="200"/>
    </Grid.ColumnDefinitions>
    <TextBlock IsTextSelectionEnabled="True"
               Text="Word"
               Grid.Row="0"
               Grid.Column="0"/>
    <TextBlock IsTextSelectionEnabled="True"
               Text="Word"
               Grid.Row="0"
               Grid.Column="1"/>
    <TextBlock IsTextSelectionEnabled="True"
               Text="Word"
               Grid.Row="1"
               Grid.Column="0"/>
    <TextBlock IsTextSelectionEnabled="True"
               Text="Word"
               Grid.Row="1"
               Grid.Column="1"/>
</Grid>

Workaround

No response

Works on UWP/WinUI

Yes

Environment

Uno.WinUI / Uno.WinUI.WebAssembly / Uno.WinUI.Skia

NuGet package version(s)

Affected platforms

WebAssembly

IDE

Visual Studio 2022

IDE version

17.6.5

Relevant plugins

No response

Anything else we need to know?

No response

[jeromelaban]

@brookslindseyjr could you provide a screenshot of what you're observing, in case, there's variability in the result. Thanks!

[ChaseKopp6]

this issue is still active but depends on where you double click, sometimes works correctly sometimes not

ex:

[ramezgerges]

The produced html from the provided sample is similar (after a lot of simplification) to

<div style="position: absolute;">
  <p style="position: absolute; top: 0px; left: 0px;">Word</p>
  <p style="position: absolute; top: 0px; left: 200px;">Word</p>
  <p style="position: absolute; top: 19px; left: 0px;">Word</p>
  <p style="position: absolute; top: 19px; left: 200px;">Word</p>
</div>

This is a problem with divs and text. Double clicking a div will select whatever is inside it. That's why all the ps are selected. One could tamper with the user-select css property to disable text-selection altogether, or achieve various levels of similarity (e.g. https://jsfiddle.net/qcewyujb/), but there doesn't seem to be an obvious way to just make it work as intended.