Header Selection Dropdown opens under keyboard and is not visible

[Sesa1988]

Is there an existing issue for this?

• [X] I have searched the existing issues

Flutter Quill version

No response

Steps to reproduce

• Create Editor
• Put Toolbar below it to the bottom
• Expand Header Selection Font Size

Expected results

Dropdown opens to the top

Actual results

Dropdown opens to the bottom below the keyboard

Code sample

Code sample

return Column(
      children: [
        Expanded(
          child: QuillEditor.basic(
            configurations: QuillEditorConfigurations(
              controller: _controller,
              placeholder: AppLocalizations.of(context).translate('note'),
              readOnly: false,
              scrollable: true,
              expands: true,
              autoFocus: widget._shouldFocus,
              padding: const EdgeInsets.only(left: 18, right: 18),
              sharedConfigurations: const QuillSharedConfigurations(
                locale: Locale('en'),
              ),
            ),
            focusNode: widget._focusNode,
            scrollController: ScrollController(),
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(bottom: 8),
          child: QuillToolbar.simple(
            configurations: QuillSimpleToolbarConfigurations(
              controller: _controller,
              showFontFamily: false,
              showFontSize: false,
              showSubscript: false,
              showSuperscript: false,
              multiRowsDisplay: showBigToolbar,
              showRedo: true,
              showUndo: true,
              buttonOptions: QuillSimpleToolbarButtonOptions(
                base: QuillToolbarBaseButtonOptions(
                  iconSize: showBigToolbar ? 14 : 16,
                ),
              ),
              sectionDividerSpace: showBigToolbar ? 0 : 16,
              toolbarSectionSpacing: showBigToolbar ? 0 : 4,
              headerStyleType: HeaderStyleType.original,
              sharedConfigurations: const QuillSharedConfigurations(
                locale: Locale('en'),
              ),
            ),
          ),
        ),
      ],
    );

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs

[Paste your logs here]

[EchoEllet]

I have encountered this issue before and I think maybe it's related to flutter itself? I'm not sure but the easiest solution would be to replace the dropdown widget with different one

[Sesa1988]

I have encountered this issue before and I think maybe it's related to flutter itself? I'm not sure but the easiest solution would be to replace the dropdown widget with different one

I think there are two possible solutions.

• Calculate padding intend and screen position and ether open to the top or bottom
• Set a property like openAlwaysTo:Enum

I just dont know if its possible to control in what direction the dropdown should open that easily.

[adamkoch]

I ran into this as well. I had to roll back to the 8.x quill editor which doesn't have this issue because it doesn't use a popupmenu.

Here are some screenshots for reference. I think (?) the regular Flutter behavior is for the popup menu to expand upwards when at the bottom of the screen or when keyboard is showing. For some reason when there is no keyboard the popupmenu does expand upward, but when keyboard is visible it expands downward underneath the keyboard.

[adamkoch]

Has anyone found a workaround to this at all? Still blocking me from upgrading to the latest flutter-quill. I guess a workaround is to just move the toolbar to the top of screen vs bottom.

I tried to look myself but couldn't work it out, if anyone else wants to look, I believe it's to do with the MenuAnchor here: https://github.com/singerdmx/flutter-quill/blob/master/lib/src/widgets/toolbar/buttons/hearder_style/select_header_style_dropdown_button.dart#L159

Also related Flutter issue I found: https://github.com/flutter/flutter/issues/142921

[vinz-mehra]

Any update on this issue?

[CatHood0]

@ellet0 I notice something about this error. To fix this, the number of elements in the MenuAnchor must be around 5 or even more to avoid the popup appearing below the keyboard. I use this "tip" to fix the same issue with my custom implementation of font family dropdown

[CoderBuck]

A solution: warp a OverlayBoundary on content

// OverlayBoundary

import 'package:flutter/material.dart';

class OverlayBoundary extends StatefulWidget {
  const OverlayBoundary({super.key, required this.child});
  
  final Widget child;

  @override
  State<OverlayBoundary> createState() => _OverlayBoundaryState();
}
class _OverlayBoundaryState extends State<OverlayBoundary> {
  late final OverlayEntry _overlayEntry = OverlayEntry(builder: (context) => widget.child);

  @override
  void didUpdateWidget(covariant OverlayBoundary oldWidget) {
    super.didUpdateWidget(oldWidget);
    _overlayEntry.markNeedsBuild();
  }

  @override
  Widget build(BuildContext context) {
    return Overlay(
      initialEntries: [_overlayEntry],
    );
  }
}

// use

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Note'),
      ),
      body: OverlayBoundary( // <====== this
        child: Column(
          children: <Widget>[
            Expanded(
              child: QuillEditor.basic(
                controller: _controller,
                configurations: const QuillEditorConfigurations(),
              ),
            ),
            quillSimpleToolbar,
          ],
        ),
      ),
    );
  }

[Sesa1988]

A solution: warp a OverlayBoundary on content

// OverlayBoundary

import 'package:flutter/material.dart';

class OverlayBoundary extends StatefulWidget {
  const OverlayBoundary({super.key, required this.child});
  
  final Widget child;

  @override
  State<OverlayBoundary> createState() => _OverlayBoundaryState();
}
class _OverlayBoundaryState extends State<OverlayBoundary> {
  late final OverlayEntry _overlayEntry = OverlayEntry(builder: (context) => widget.child);

  @override
  void didUpdateWidget(covariant OverlayBoundary oldWidget) {
    super.didUpdateWidget(oldWidget);
    _overlayEntry.markNeedsBuild();
  }

  @override
  Widget build(BuildContext context) {
    return Overlay(
      initialEntries: [_overlayEntry],
    );
  }
}

// use

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Note'),
      ),
      body: OverlayBoundary( // <====== this
        child: Column(
          children: <Widget>[
            Expanded(
              child: QuillEditor.basic(
                controller: _controller,
                configurations: const QuillEditorConfigurations(),
              ),
            ),
            quillSimpleToolbar,
          ],
        ),
      ),
    );
  }

Thanks! This fixed my issue. This bug can be closed.