[iOS] Fix Editor control does not scroll properly on iOS when enclosed in a Border control. by Tamilarasan-Paranthaman · Pull Request #24683 · dotnet/maui

Tamilarasan-Paranthaman · 2024-09-10T07:44:16Z

Root Cause:

On iOS, when the Editor control is enclosed in a Border, the Border's ClipPath bounds cause only the initial content of the Editor to be visible. If the Editor is scrollable, the offset does not update correctly during vertical scrolling. As a result, only the initial content is visible during scrolling, while the rest of the view remains hidden.

Description of Change:

To address this, I wrapped the platform view UITextView in a container on the handler when it is inside a Border, similar to how we handled UIScrollView in the following reference.

Validated the behaviour in the following platforms,

Android
Windows
iOS
Mac

Reference

[iOS] Don't apply mask to UIScrollView so the content doesn't get masked out #14096

Issues Fixed

Fixes #20736
Fixes #18486

Screenshots

Before Issue Fix	After Issue Fix
Screen.Recording-issue.mov	Screen.Recording.mov

dotnet-policy-service · 2024-09-10T07:44:29Z

Hey there @Tamilarasan-Paranthaman! Thank you so much for your PR! Someone from the team will get assigned to your PR shortly and we'll get it reviewed.

jfversluis · 2024-09-10T13:11:57Z

/azp run

azure-pipelines · 2024-09-10T13:12:19Z

Azure Pipelines successfully started running 3 pipeline(s).

azure-pipelines · 2024-09-11T12:36:05Z

Azure Pipelines successfully started running 3 pipeline(s).

azure-pipelines · 2024-09-18T10:37:58Z

Azure Pipelines successfully started running 3 pipeline(s).

azure-pipelines · 2024-09-19T13:11:53Z

Azure Pipelines successfully started running 3 pipeline(s).

last-Programmer · 2024-09-24T01:49:41Z

This is blocking me to migrate to border conrol from frame. with editor inside frame it is working fine. now the frame is deprecated in .net 9 and need to migrate to border. but without this fix we cant migrate. WIll it be fixed when .net 9 released.

thanks

PureWeen

I ran the attached uitest without the fix and it doesn't reproduce the issue.

It looks like it has to be inside a layout in order for it to reproduce

  <VerticalStackLayout>
            <Border Stroke="LightGray">
                <Editor  HeightRequest="100"
                         Text="Line 1&#xa;Line 2&#xa;Line 3&#xa;Line 4&#xa;Line 5&#xa;Line 6&#xa;Line 7&#xa;" />
            </Border>
        </VerticalStackLayout>

If I remove the VSL then it no longer cuts. Which also makes me wonder if this is the correct fix.

I worry about the EditorHandler having to inspect the parent to know if it needs a container. This fix feels a little bit like it's not resolving the core issue

Tamilarasan-Paranthaman · 2024-09-26T10:18:19Z

@PureWeen, without the VerticalStackLayout, the Border will occupy the full height, and the issue only occurs when the editor's content height exceeds the content mask height. If you scroll the Editor with only 7 lines and without the VerticalStackLayout, the editor's content height will not extend beyond the content mask height. This issue typically appears after adding around 28 or 29 lines in this scenario.

However, you can still reproduce the issue without the VerticalStackLayout by setting the Border's HeightRequest to 150, which will reveal the problem when scrolling vertically.

I apologize for the inconvenience. I missed adding the VerticalStackLayout in my test case. Should I include the VerticalStackLayout or set the Border's HeightRequest in my test case? Which option would you recommend?

cagriy · 2024-10-03T15:23:53Z

It works fine in Frame if anybody desperately needs rounded corners (or if this helps towards a fix).

last-Programmer · 2024-10-04T09:19:02Z

@cagriy frame is being deprecated in .net 9. It is recommened to migrate to border since frame is deprecated and will be removed in future versions. Without this fix we cant migrate to border control.

PureWeen · 2024-10-04T22:02:50Z

src/Core/src/Handlers/Editor/EditorHandler.iOS.cs

+			{
+				// If we are wrapped by a BorderView, we need a container
+				// to handle masks and clip shapes effectively.
+				if (VirtualView?.Parent is IBorderView)


I don't feel like this is the approach we'll want to take here.

Users report that this all works fine with the Frame control

it doesn't feel like Editor should be reaching up to the parent here to figure out if it needs a container. This feels like it's not fixing the root of the problem.

I'm still poking a bit to see if I can figure out a better approach here.

I'm curious if there's a way to fix this inside the BorderView control vs fixing here

kubaflo · 2024-10-04T23:07:14Z

Hi! What do you think about this one #25098

kubaflo · 2024-10-04T23:10:51Z

src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue20736.cs

+		{
+			App.WaitForElement("editor");
+			App.ScrollDown("editor", ScrollStrategy.Programmatically);
+			await Task.Delay(1000);


I'm not sure if this will generate the same screenshots every time 🤔

jsuarezruiz · 2024-11-26T12:53:56Z

@Tamilarasan-Paranthaman Could you rebase to fix the conflicts? Thanks in advance.

Tamilarasan-Paranthaman added 2 commits September 9, 2024 18:44

[iOS] Resolved the issue in the Editor control clipping while scrolling.

3c0fb85

Added the test case.

8184e18

dotnet-policy-service bot added the community ✨ Community Contribution label Sep 10, 2024

Tamilarasan-Paranthaman changed the title ~~Fix 20736~~ [iOS] Fix Editor control does not scroll properly on iOS when enclosed in a Border control. Sep 10, 2024

Modified the fix with another approach.

c54f71b

Tamilarasan-Paranthaman marked this pull request as ready for review September 10, 2024 11:03

Tamilarasan-Paranthaman requested a review from a team as a code owner September 10, 2024 11:03

Tamilarasan-Paranthaman requested review from Eilon and jsuarezruiz September 10, 2024 11:03

Tamilarasan-Paranthaman added platform/ios area-controls-editor Editor labels Sep 10, 2024

Modified the script and added the images.

6aac591

changes in the test script.

598fb54

Added snapshots

0424c2e

PureWeen requested changes Sep 25, 2024

View reviewed changes

PureWeen requested changes Oct 4, 2024

View reviewed changes

kubaflo mentioned this pull request Oct 4, 2024

[iOS] Put the UIScrollView into a UIView in a border handler #25098

Merged

kubaflo reviewed Oct 4, 2024

View reviewed changes

sheiksyedm added the partner/syncfusion Issues / PR's with Syncfusion collaboration label Dec 6, 2024

PureWeen closed this in #25098 Jan 9, 2025

github-actions bot locked and limited conversation to collaborators Feb 9, 2025

Tamilarasan-Paranthaman deleted the fix-20736 branch June 16, 2025 11:00

Conversation

Tamilarasan-Paranthaman commented Sep 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Root Cause:

Description of Change:

Reference

Issues Fixed

Screenshots

Uh oh!

dotnet-policy-service bot commented Sep 10, 2024

Uh oh!

jfversluis commented Sep 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

azure-pipelines bot commented Sep 10, 2024

Uh oh!

azure-pipelines bot commented Sep 11, 2024

Uh oh!

azure-pipelines bot commented Sep 18, 2024

Uh oh!

azure-pipelines bot commented Sep 19, 2024

Uh oh!

last-Programmer commented Sep 24, 2024

Uh oh!

PureWeen left a comment

Choose a reason for hiding this comment

Uh oh!

Tamilarasan-Paranthaman commented Sep 26, 2024

Uh oh!

cagriy commented Oct 3, 2024

Uh oh!

last-Programmer commented Oct 4, 2024

Uh oh!

PureWeen Oct 4, 2024

Choose a reason for hiding this comment

Uh oh!

kubaflo commented Oct 4, 2024

Uh oh!

kubaflo Oct 4, 2024

Choose a reason for hiding this comment

Uh oh!

jsuarezruiz commented Nov 26, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

Tamilarasan-Paranthaman commented Sep 10, 2024 •

edited

Loading

jfversluis commented Sep 10, 2024 •

edited

Loading