[Gallery][WASM][UI Components -TextBox] Misalignment of Clear Button with Cursor When Switching Between Textboxes

[jhanvi03]

Current behavior

When switching from one textbox to another, the cross sign (clear button) for removing text does not align with the cursor

Screen.Recording.2024-08-21.at.11.34.07.AM.mov

Expected behavior

The cross sign (clear button) should be consistently aligned with the cursor when switching between textboxes

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

1. Open Galley canary WASM
2. From the side Menu expand UI components
3. From UI components click on TextBox
4. Enter text in one textbox
5. Enter text in another textbox
6. switch between 2 textbox and observe the clear sign

Environment

Nuget Package:

Package Version(s):

Affected platform(s):

• iOS
• Android
• WebAssembly
• UWP
• MacOS

Anything else we need to know?

Could be related to unoplatform/uno#17914 , unoplatform/uno#17633

[agneszitte]

@eriklimakc can you take a look and leave more info please

[eriklimakc]

From a quick test using an newly created Uno app:

That's wasm only. Apparently the control is not changing to the "Focused" VisualState when it is clicked.

This is reproducible on both the "FilledTextBoxStyle" and the "OutlinedTextBoxStyle". But also with PasswordBox, so I don't think this is a bug brought with the Header/Placeholder changes.

cc @agneszitte @kazo0

[eriklimakc]

This issue is also reproducible using <UnoThemesVersion>5.0.13</UnoThemesVersion>. Version prior to the Header+Placeholder changes. Could it be related to unoplatform/uno#17914?

cc @dr1rrb @Xiaoy312 @kazo0

[eriklimakc]

It's reproducible on fluent from blank template: unoplatform/uno#18040

[agneszitte]

@Youssef1313 is unoplatform/uno#18042 will completely fix this issue, please?

[Youssef1313]

Yes it should, I think.

[agneszitte]

@jhanvi03 can you retest this issue with latest Gallery canary build to verify if it is fixed please

[jhanvi03]

Tested with latest canary build and I am still able to reproduce.

Screen.Recording.2024-09-04.at.2.12.24.PM.mov

[Youssef1313]

Latest available Uno.Sdk doesn't include the fix yet. We need unoplatform/uno.templates#941 first

[agneszitte]

@Youssef1313 if you can update @jhanvi03 when it will be ready for QA again for this issue, it will be appreciated please

[Youssef1313]

It should be ready for testing again

[kazo0]

FYI @jhanvi03 I think you should be able to test this now, at least once there is a working canary :)

[jhanvi03]

The issue is resolved on Mac WASM but persists on iOS. On iOS, when moving the cursor from one textbox to another:
-The 'Cross' icon does not appear.
-Instead of placing the cursor at the end of the text, all the text gets selected. After deselecting, the 'Cross' icon still does not appear.

MAC WASM: Test Pass
Version:
Package Referenced version Updated version
Uno.Core.Extensions.Compatibility 4.0.1 4.1.1
Uno.Core.Extensions.Disposables 4.0.1 4.1.1
Uno.Sdk 5.3.96 5.4.0-dev.236

Package	Referenced version	Updated version
Uno.Core.Extensions.Compatibility	4.0.1	4.1.1
Uno.Core.Extensions.Disposables	4.0.1	4.1.1
Uno.Sdk	5.3.96	5.4.0-dev.236

Screen.Recording.2024-09-09.at.9.56.14.AM.mov

iOS: Test Fail
Version: 1.6.0(2409061451.1778)

RPReplay_Final1725571807.2.MP4

[agneszitte]

The issue is resolved on Mac WASM but persists on iOS

@Youssef1313 I will let you take a look as @jhanvi03 is still able to reproduce on iOS please

[Youssef1313]

@ajpinedam Would you be able to help with the iOS part of this issue?

[ajpinedam]

@ajpinedam Would you be able to help with the iOS part of this issue?

Yes, sure I can look into it. (@Youssef1313 ).

Thanks @agneszitte for assigning the issue to me :)