[web] Fix cursor positioning in multiline field on iOS. #167973
Conversation
github-actions
bot
added
a: text input
|
@ksokolovskyi Thank you so much for your efforts in addressing this issue — it has been a significant challenge for me, and I truly appreciate your work on it. Actually, a similar issue also occurs on Android Web, not just iOS Web. When the user scrolls to the bottom and taps on a specific area, the cursor always jumps to the end of the input. You can find more details here: #163607 I’m wondering — could this be related to the same underlying issue that affected iOS Web? Once again, thank you very much for your attention and dedication to resolving these problems. |
|
Hi @mycalls, thanks for the notice. I expected this issue to be already fixed on Android. I will check it and give you feedback soon. UPD: I left the comment in the issue #163607 (comment) |
|
@mdebbar Tagged you for review as this is a web engine fix, but let me know if I can help review as well. |
|
@ksokolovskyi Do you know if this PR will also fix #167805? |
@justinmc thanks for pointing me out to this issue. Unfortunately this PR doesn't fix any of the selection issues on both iOS and Desktop. I briefly described this in the end of the PR description. |
|
Hi @mdebbar, could you please take a look at this PR when you have time? |
ksokolovskyi
force-pushed
the
fix-cursor-positioning-on-ios-web
branch
from
ad81c6e to
5705979
Compare
Fixes #124483
Description
The issue happens when the
<textarea>placed on top of theTextField, receives a tap, and emits theselectionchangedevent. Because texts in<textarea>andTextFieldare misplaced, the values in theselectionchangedevent are not correct, which is why the cursor is placed in the incorrect position.bug_with_overlay.mov
While investigating the issue, I tried to apply the same fix as in flutter/engine#41202, but it didn't work. Then I prevented the touch events on the
<textarea>and it worked, but this is not the way to go as we miss the selection and the "long press to focus without keyboard" functionality.After adding some of the debug logs for
selectionchangedevents andTextInput.setEditingStatemessages, I got the following flow:TextFieldTextInput.setEditingStatemessage with a correct editing state is getting received from the framework<textarea>selectionchangeevent with a correct editing state is getting emitted because of the changes applied to<textarea>selectionchangeevent with incorrect editing state is emitted as a result of the tap event on<textarea>I decided to try to throttle a
selectionchangeevent with a short delay (150ms), and revert editing state to the previous one whenselectionchangeevent is emitted and throttling is active. And this worked!The result is deployed to https://ios-web-cursor-positioning.web.app
bug.mov
fix.mov
While this PR workarounds the cursor positioning in the multiline fields on iOS web, the selection of the text is still broken, and the native grey selection overlay appears as well (details #99918 (comment)).
As an experiment, I tried to adjust
line-height,letter-spacing, andword-spacingproperties of<textarea>by hand to match texts as closely as possible and got a promising result.I think that it would be great to push further #135159 in order to improve text input on web.
web_input_sync.mov
Pre-launch Checklist
///).If you need help, consider asking for advice on the #hackers-new channel on Discord.