Skip to content

Enabled Semantics breaks typing in editor, previous fix no longer working #2531

Description

@oliverxchen

Have you checked for an existing issue?

Flutter Quill Version

11.2.0

Steps to Reproduce

Thank you for providing this library! I've just started using it and it seems very good.

This issue is similar to #1442, but the previous fix of setting autoFocus = true no longer works in version 11.2.0.

I would really like to be able to enable Semantics on the web. Without semantics enabled, E2E testing with Playwright, Appium or Maestro become very difficult/brittle.

Here's a minimal reproducible example, run with flutter run -d chrome:

import 'package:flutter/material.dart';
import 'package:flutter/semantics.dart';
import 'package:flutter_quill/flutter_quill.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  SemanticsBinding.instance.ensureSemantics();  // Commenting this line will make the editor typable
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
      localizationsDelegates: [FlutterQuillLocalizations.delegate],
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final QuillController _controller = () {
    return QuillController.basic(config: QuillControllerConfig());
  }();
  final FocusNode _editorFocusNode = FocusNode();
  final ScrollController _editorScrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    _controller.document = Document.fromJson([
      {"insert": "Hello, world!\n"},
    ]);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Flutter Quill conflict with Semantics minimal working example',
        ),
      ),
      body: SafeArea(
        child: Column(
          children: [
            QuillSimpleToolbar(controller: _controller),
            Expanded(
              child: QuillEditor(
                focusNode: _editorFocusNode,
                scrollController: _editorScrollController,
                controller: _controller,
                config: QuillEditorConfig(
                  placeholder: 'Start writing your notes...',
                  padding: const EdgeInsets.all(16),
                  autoFocus: true,  // this no longer fixes the issue
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    _editorScrollController.dispose();
    _editorFocusNode.dispose();
    super.dispose();
  }
}

Expected results

Expect to be able to use the keyboard to type in the editor.

Actual results

Typing in the editor has no effect.

Additional Context

Not sure if this will help in debugging the issue, but the only key that I've found that works is the Tab key and that properly inserts \t.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions