Skip to content

[BUG] Flutter 3.27.x: HtmlEditor element does not get focus #565

Open
@verscph

Description

@verscph

Describe the bug
Using Flutter 3.27.1 and 3.27.2, the HtmlEditor component does not get focus when used in Flutter Web

To Reproduce
Steps to reproduce the behavior:

  1. Run your app
class MyApp extends StatelessWidget {
  final GlobalKey<FormState> _campaignFormKey = GlobalKey<FormState>();
  final TextEditingController sharepointController = TextEditingController();
  final FocusNode sharepointFocusNode = FocusNode();

  final HtmlEditorController creativeDescriptionController =
      HtmlEditorController();
  MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Form(
          key: _campaignFormKey,
          child: Padding(
            padding: const EdgeInsets.all(32.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              spacing: 16,
              children: [
                Row(
                  children: [
                    Text(
                      'Inputfield',
                      style: Theme.of(context)
                          .textTheme
                          .bodyMedium!
                          .copyWith(fontWeight: FontWeight.bold),
                    ),
                    horizontalSpaceTiny,
                    Expanded(
                      child: TextFormField(
                        controller: sharepointController,
                        focusNode: sharepointFocusNode,
                      ),
                    ),
                  ],
                ),
                Text(
                  'Creative briefing',
                  style: Theme.of(context)
                      .textTheme
                      .bodyMedium!
                      .copyWith(fontWeight: FontWeight.bold),
                ),
                HtmlEditor(
                  controller: creativeDescriptionController,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
  1. When you click inside the HtmlEditor element -> it gets focus
  2. Click inside "Inputfield" -> it gets focus
  3. Click inside HtmlEditor -> it does not get focus

Screen recording:
https://github.com/user-attachments/assets/af249e5e-8d76-4da3-99fd-8939e4890cbd

Expected behavior
HtmlEditor component gets focus on click.

Screenshots
If applicable, add screenshots to help explain your problem.

Device:
Chrome

** Additional info **
Debug console logs:

The platformViewRegistry getter is deprecated and will be removed in a future release. Please import it from `dart:ui_web` instead.
Height of Platform View type: [QWQCMuA3ySJZEQ==] may not be set. Defaulting to `height: 100%`.
Set `style.height` to any appropriate value to stop this message.
Width of Platform View type: [QWQCMuA3ySJZEQ==] may not be set. Defaulting to `width: 100%`.
Set `style.width` to any appropriate value to stop this message.
done

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions