Header Selection Dropdown opens under keyboard and is not visible

[Sesa1988]

Is there an existing issue for this?

• 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:
flutter/flutter#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 Widget

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],
    );
  }
}

Workaround

  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,
          ],
        ),
      ),
    );
  }

[EchoEllet]

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

Glad to hear it's fixed, a workaround hardly fixes this issue, will need more time to see if it's a flutter issue. See Flutter #142921

[Sesa1988]

The OverlayBoundary workaround does not work properly anymore on the latest Flutter version. The dropdown is way to high up when the keyboard is closed or partialy behind the toolbar and keyboard when the keyboard is up.

@EchoEllet It could be this Flutter issue but it seems that now no workaround works anymore.

[EchoEllet]

It could be this Flutter issue but it seems that now no workaround works anymore.

Will likely avoid using MenuAnchor by reverting to the old code before v9. Which will be a breaking change in v11 (will provide details in the migration guide).

[Sesa1988]

It could be this Flutter issue but it seems that now no workaround works anymore.

Will likely avoid using MenuAnchor by reverting to the old code before v9. Which will be a breaking change in v11 (will provide details in the migration guide).

Sounds good. Do you have a rough estimate of when v11 will be released?

[EchoEllet]

Do you have a rough estimate of when v11 will be released?

See #2422 for the issues that must be fixed before releasing it as stable. You can use it now. The pre-release is not buggy or experimental. We expect a few more breaking changes that will be documented in CHANGELOG and the migration guide.

[CoderBuck]

This is an issue in Flutter version 3.27. It has been fixed in the master branch. The reason is that in Flutter 3.27, menus pop were forcibly attached to the root overlay, which is clearly unreasonable.

https://github.com/flutter/flutter/pull/159907/files

[Sesa1988]

This is an issue in Flutter version 3.27. It has been fixed in the master branch. The reason is that in Flutter 3.27, menus pop were forcibly attached to the root overlay, which is clearly unreasonable.

https://github.com/flutter/flutter/pull/159907/files

Could this also be related?

flutter/flutter#161437