[web] Support scrolling inside the text field

[mdebbar]

There are 2 situations where the text field can scroll:

1. Very long text in a single-line text field (horizontal scrolling).
2. Many lines of text in a multi-line text field (vertical scrolling).

Currently, the scrolling works fine but the issue is that Flutter's field and the browser's field get out of sync, and they are scrolled to different positions.

[nturgut]

Closing/Merging with the duplicate: #40712

[nturgut]

For horizontal scrolling one thing to do is to put tag inside the glass pane.

[mypocketsoft]

👍

[mypocketsoft]

I can't continue my flutter web project because of this issue. It has been open for nearly a year. Is there any hope of a solution soon? I'm wondering about moving back to building an Ionic PWA, but that would be a backward step I think.
Thanks for your efforts,
Andrew

[mahmoudsalah37]

Really so slowly to solve this issue

[TahaTesser]

Tried to reproduce, scrolling does fine in both directions but as mentioned the issue is Flutter's field and the browser's field get out of sync, not sure how to confirm that

code sample

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      theme: ThemeData.dark(),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material App Bar'),
      ),
      body: Center(
        child: TextField(
          maxLines: 1,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {},
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel master, 1.22.0-10.0.pre.176, on Microsoft Windows [Version 10.0.19041.508], locale en-US)
    • Flutter version 1.22.0-10.0.pre.176 at C:\Code\flutter_master
    • Framework revision 96ca0e272b (6 hours ago), 2020-09-15 09:02:04 +0100
    • Engine revision 7e962ba911
    • Dart version 2.10.0 (build 2.10.0-124.0.dev)


[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at C:\Code\sdk
    • Platform android-30, build-tools 30.0.2
    • ANDROID_HOME = C:\Code\sdk
    • Java binary at: C:\Code\android-studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[✓] Visual Studio - develop for Windows (Visual Studio Community 2019 16.7.3)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.7.30503.244
    • Windows 10 SDK version 10.0.18362.0

[✓] Android Studio (version 4.0)
    • Android Studio at C:\Code\android-studio
    • Flutter plugin version 49.0.2
    • Dart plugin version 193.7547
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[✓] VS Code (version 1.49.0)
    • VS Code at C:\Users\Taha\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.14.1

[✓] Connected device (4 available)
    • RMX2001 (mobile)  • EUYTFEUSQSRGDA6D • android-arm64  • Android 10 (API 29)
    • Windows (desktop) • windows          • windows-x64    • Microsoft Windows [Version 10.0.19041.508]
    • Web Server (web)  • web-server       • web-javascript • Flutter Tools
    • Chrome (web)      • chrome           • web-javascript • Google Chrome 85.0.4183.102

• No issues found!

[git9am]

It's shame to have this issue as P4 and no progress is made after nearly two years. Our products are even suffering from user complains about the typing experience.

[mypocketsoft]

Last September after my last post I gave up hope that this issue would ever be fixed. I got my hopes up again when Flutter for Web was officially released. But still nothing.
So I abandoned my Flutter development completely and rewrote my entire app in Ionic Framework with Vue, as a PWA. I did this with a heavy heart because as a developer I really liked Flutter. But I must have something that works.
I have found Ionic with Vue to be very easy to use and well supported. My app will be ready to launch soon. When it is, I'll announce it on my web site at https://www.taskangel.com, so you can see what an Ionic Vue PWA looks like.
Flutter has been a big disappointment, and it wasted months of my time driving me into a dead end.

[git9am]

Some experiments on this. (More details #78031 (comment))

It looks like a font issue. Without specifying any style to the TextField, it applies Roboto fonts by default, but the textarea element created as shadow applies an apple font on Safari by default, which causes them out of sync.

Adding Roboto fonts to pubspec.yaml and applying them to the TextField won't fix. Although the font is properly applied to the shadow textarea element, it's not taking any effect.

It seems that we have the font downloaded but it's not recognised by Safari. We add Roboto fonts CSS to the template index.html and finally see the textarea perfectly overlaps with the flutter TextField.

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    src: local('Roboto Thin'),
         local('Roboto-Thin'),
         url(https://fonts.gstatic.com/s/roboto/v15/2tsd397wLxj96qwHyNIkxHYhjbSpvc47ee6xR_80Hnw.woff2) format('woff2'),
         url(https://fonts.gstatic.com/s/roboto/v15/vzIUHo9z-oJ4WgkpPOtg13YhjbSpvc47ee6xR_80Hnw.woff) format('woff'),
         url(https://fonts.gstatic.com/s/roboto/v15/Jzo62I39jc0gQRrbndN6nXYhjbSpvc47ee6xR_80Hnw.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
  }
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: local('Roboto Light'),
         local('Roboto-Light'),
         url(https://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2) format('woff2'),
         url(https://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff'),
         url(https://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfSZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
  }
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'),
         local('Roboto-Regular'),
         url(https://fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2'),
         url(https://fonts.gstatic.com/s/roboto/v15/CrYjSnGjrRCn0pd9VQsnFOvvDin1pK8aKteLpeZ5c0A.woff) format('woff'),
         url(https://fonts.gstatic.com/s/roboto/v15/QHD8zigcbDB8aPfIoaupKOvvDin1pK8aKteLpeZ5c0A.ttf) format('truetype'),
         url(https://fonts.gstatic.com/s/roboto/v15/5YB-ifwqHP20Yn46l_BDhA.eot);
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
  }

These are just some clues to explain this issue but not a fix. I guess there are more to find out.

[git9am]

Besides the font issue causing the text "structure" difference between TextField and <textarea>, it seems that scrolling isn't implemented from the flutter framework to the web_ui engine. By adding a scroll framework-to-engine message, I make it to have a basic scroll sync. Further modification may be needed on the DOM side, to get rid of the grey tint and the caret.

I'm not sure if anyone from the Flutter team or community is actually working on this issue. I'd like to spend some time on it if I'm in the right direction and wouldn't step on anyone's toe.

Simulator.Screen.Recording.-.iPhone.12.-.2021-06-21.at.00.51.30.mp4