Spellcheck on Flutter Web

[nturgut]

Supporting spellcheck for text editing in Flutter Web Engine

[nturgut]

PR (as of today) will enable support for all browsers other than Safari Mobile: flutter/engine#12192

I am working on adding a fix for Safari Mobile as well.

[kunit1]

Is spellcheck supposed to be working for most browsers? I don't see the squiggly lines in a TextField in Chrome Desktop. Is the plan to add an option to enable spellcheck on a TextField?

[nturgut]

@kunit1, the issue is still open. It is a todo on our list. Right now we are prioritizing autofill. I'll update this issue about spell check later. Please feel free to have a look at our project for text editing:
https://github.com/flutter/flutter/projects/57

[alexandersidum]

I noticed that spell-check works in Firefox for Flutter Web apps. If you add this snippet as an include on your index.html, you can invoke the method during onChanged or similar in Flutter Web textfields. It should enable spell-check in Chrome on the active textfield. It isn't perfect, but it might serve as a good placeholder.

function enableSpellCheck() { document.activeElement.setAttribute('spellcheck','true'); }

Thanks,
but is there any way to enable spellcheck to unfocused element also?

[davebound]

I noticed that spell-check works in Firefox for Flutter Web apps. If you add this snippet as an include on your index.html, you can invoke the method during onChanged or similar in Flutter Web textfields. It should enable spell-check in Chrome on the active textfield. It isn't perfect, but it might serve as a good placeholder.

function enableSpellCheck() { document.activeElement.setAttribute('spellcheck','true'); }

Thanks. How to include this code in index.html and how to call from Flutter web Dart code please?

[tsgregoryv]

It would be possible to use the JS querySelector() or querySelectorAll() to find all text elements & call setAttribute(), but I don't think it would be reliable.

To include the JS code:

1. Add the code in a separate .js file in the web folder of your project directory. Then modify index.html to reference/include it.
2. Alternatively, you can modify the index.html file directly and embed the code between script tags.

It can be invoked through the dart:js library:

import 'dart:js' as js;
js.context.callMethod('enableSpellCheck');

Before you use it in production, ensure that you test it well. It is possible for the misspelling indicator to show up at an unexpected location with this method.

[serbixote]

I agree on this being higher priority than P4 🙏🏼

[ghost]

@marco2704 Seconded. This is important to a wide variety of applications, and a large section of users are completely incapable of spelling without spellcheck. This should be at lease P3, to match the corresponding issue for android/iOS

[davidsomekh]

I am using flutter web, and this issue is my biggest concern right now. Spell check is something very basic!

[fan2dev]

any update on this?

[mdebbar]

I've looked into this a bit.

Enabling the browser spellcheck (to show the red squiggly line) is straightforward (here). But it requires a few other things in order to work well:

1. Flutter's scroll position in the text field needs to be kept in sync with the <input> element (issue).
2. Keep the <input> element alive and correctly positioned after the text field loses focus (to keep the squiggly lines visible).
3. Re-verify that all styling information is kept in sync between Fltutter's text field and the <input> element (to make sure that Flutter's text and the <input>'s text are perfectly on top of each other).

This is yet another issue that would become trivial if implement this proposal.

[DavidOrakpo]

Any update on this issue please?

[pavlogrinchenkoo]

@nturgut Hello! Is there any progress?

[frank42hh]

It's quite confusing that new features (for example autofill, 4 years ago) have a higher priority than fixing bugs.

[ws900]

@nturgut Hi!
How can we to elevate the priority level of this issue?
This is important because enable us to use Flutter on all platforms.

[Eimen2018]

It would be possible to use the JS querySelector() or querySelectorAll() to find all text elements & call setAttribute(), but I don't think it would be reliable.

To include the JS code:

1. Add the code in a separate .js file in the web folder of your project directory. Then modify index.html to reference/include it.
2. Alternatively, you can modify the index.html file directly and embed the code between script tags.

It can be invoked through the dart:js library:

import 'dart:js' as js; js.context.callMethod('enableSpellCheck');

Before you use it in production, ensure that you test it well. It is possible for the misspelling indicator to show up at an unexpected location with this method.

if you don't want to call js.context.callMethod('enableSpellCheck'); on OnChange and if you want the spell check on every input you can use this inside index.html

<script>
      window.addEventListener("load", function (e) {
        /// Since [spellCheckConfiguration:const SpellCheckConfiguration()] don't work on flutter web
        /// this is to enable spellcheck for input elements when focused
        document.addEventListener("focusin", function (event) {
          // Check if the focused element is an input element
          if (
            event.target.tagName === "INPUT" ||
            event.target.tagName === "TEXTAREA"
          ) {
            event.target.setAttribute("spellcheck", "true");
          }
        });
      });
   </script>

[chipnetics]

if you don't want to call js.context.callMethod('enableSpellCheck'); on OnChange and if you want the spell check on every input you can use this inside index.html

<script>
      window.addEventListener("load", function (e) {
        /// Since [spellCheckConfiguration:const SpellCheckConfiguration()] don't work on flutter web
        /// this is to enable spellcheck for input elements when focused
        document.addEventListener("focusin", function (event) {
          // Check if the focused element is an input element
          if (
            event.target.tagName === "INPUT" ||
            event.target.tagName === "TEXTAREA"
          ) {
            event.target.setAttribute("spellcheck", "true");
          }
        });
      });
   </script>

Amazingly this works quite well, except I see that the underline squiggles are way offset from the actual text. Any ideas why?

[user-23xyz]

@chipnetics i thougth the offset was a little bit, but turns out the offset is WAY FAR from the actual text, no updates from the flutter team to this'

[jeremanuel]

It would be possible to use the JS querySelector() or querySelectorAll() to find all text elements & call setAttribute(), but I don't think it would be reliable.
To include the JS code:

1. Add the code in a separate .js file in the web folder of your project directory. Then modify index.html to reference/include it.
2. Alternatively, you can modify the index.html file directly and embed the code between script tags.

It can be invoked through the dart:js library:
import 'dart:js' as js; js.context.callMethod('enableSpellCheck');
Before you use it in production, ensure that you test it well. It is possible for the misspelling indicator to show up at an unexpected location with this method.

if you don't want to call js.context.callMethod('enableSpellCheck'); on OnChange and if you want the spell check on every input you can use this inside index.html

<script> window.addEventListener("load", function (e) { /// Since [spellCheckConfiguration:const SpellCheckConfiguration()] don't work on flutter web /// this is to enable spellcheck for input elements when focused document.addEventListener("focusin", function (event) { // Check if the focused element is an input element if ( event.target.tagName === "INPUT" || event.target.tagName === "TEXTAREA" ) { event.target.setAttribute("spellcheck", "true"); } }); }); </script>

This doesn't work with semantics enabled :(