Suggestions box falsely displayed on top of widget and not fully visible when ChipsInput is used in SingleChildScrollView

[jozes]

When the ChipsInput widget, after getting focus by clicking in to add another chip entry, is scrolled up to became fully visible, the suggestions box is falsely displayed on top of the widget. This situation is caused by execution of _scrollToVisible() located in the chips_input.dart which is always called on _openInputConnection(). This is not a problem when the widget position on the screen is not such that the widget could be really repositioned. But when the ChipsInput widget is displayed as one of the widgets in a SingleChildScrollView, the initial calculation of the suggestions box location is too early as the ChipsInput widget is relocated with _scrollToVisible() to be fully visible.

My solution for this problem is the following:

In function _scrollToVisible() (chips_input.dart) replace:

await Scrollable.of(context)?.position.ensureVisible(renderBox);

with

await Scrollable.of(context)?.position.ensureVisible(renderBox).then(() { WidgetsBinding.instance?.addPostFrameCallback(() { _suggestionsBoxController.overlayEntry?.markNeedsBuild(); }); });

The reasoning behind is that the widget's overlay entry, which is actually the suggestions box displayed on top, needs to be rebuilt to reflect the new screen position after being scrolled and be displayed in the right position.

[jozes]

The above proposed solution, together with the solutions for issues https://github.com/danvick/flutter_chips_input/issues/104 https://github.com/danvick/flutter_chips_input/issues/102 https://github.com/danvick/flutter_chips_input/issues/97 https://github.com/danvick/flutter_chips_input/issues/95 is available below and hopefully it will be merged with the master some time in the future. Until then use the following in your pubspec.yaml

flutter_chips_input: git: https://github.com/jozes/flutter_chips_input.git

[jozes]

The above code will be thoroughly tested before I will create a pull request.

[joeatnovvia]

@jozes I was having problems with the Samsung keyboard not allowing me to type more than 1 character. I checked out your version of this: flutter_chips_input: git: https://github.com/jozes/flutter_chips_input.git

And for a Samsung keyboard, it still works a little funky: I can type more than 1 character, but when I type "jui" and then select "Juice Bar" off the list, it shows me I selected Juice Bar. And then the next thing I type makes "Juice Bar" disappear, and I see "juib" instead, as if I had just kept typing.
Have you tested your fix on Samsung phones? Thanks! Joe

[jozes]

Hi Joe,

This widget is a night mare L I don’t know why it is causing so many problems. For web version and Flutter latest stable version (3.0.5) I just copied everything into my project and stop playing with the upgrades as it is constantly causing problems after each upgrade of Flutter or dependent widgets.

My fix was originally for older flutter version, probably well below 2.0. It was working fine on Samsung. Also it works fine with version above 2.5. I just tested it with version 2.8.5.

Currently I have problem in web version where the input does not accept “space” character. I just found the problem yesterday and will have to debug the problem. I think you have to do the same by using debugger.

Kind regards,

Joze

From: joeatnovvia @.*** Sent: Thursday, August 04, 2022 12:27 AM To: danvick/flutter_chips_input Cc: Joze; Mention Subject: Re: [danvick/flutter_chips_input] Suggestions box falsely displayed on top of widget and not fully visible when ChipsInput is used in SingleChildScrollView (Issue #104)

@jozes https://github.com/jozes I was having problems with the Samsung keyboard not allowing me to type more than 1 character. I checked out your version of this: flutter_chips_input: git: https://github.com/jozes/flutter_chips_input.git

And for a Samsung keyboard, it still works a little funky: I can type more than 1 character, but when I type "jui" and then select "Juice Bar" off the list, it shows me I selected Juice Bar. And then the next thing I type makes "Juice Bar" disappear, and I see "juib" instead, as if I had just kept typing. Have you tested your fix on Samsung phones? Thanks! Joe

— Reply to this email directly, view it on GitHub https://github.com/danvick/flutter_chips_input/issues/104#issuecomment-1204547082 , or unsubscribe https://github.com/notifications/unsubscribe-auth/ADIMZ6NJ76CUB4VABVVKRGTVXLW4JANCNFSM5MCP4JSA . You are receiving this because you were mentioned. https://github.com/notifications/beacon/ADIMZ6KNWQQM7NMDC7OEADDVXLW4JA5CNFSM5MCP4JSKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOI7F64CQ.gif Message ID: @.***>

[jozes]

Joe,

I hope the below code might give some insights and even help you to resolve you problem.

I have replaced the RawKeyboardListener with just KeyboardListener (this is appropriate for latest releases of Flutter). I did this for web version, not for mobile devices. By using print output you can monitor what kind of events you are getting and then you can make a corrective action. I had problem that “space” key was neglected so I added a code where I check if “space” is pressed and then I simly add it to the input text by calling updateEditingValue function. This change was made in chips_input.dart file. Just search for RawKeyboardListener and replace the complete code with the below code and see if it helps you.

Kind regards, Joze

return KeyboardListener(

  focusNode: _focusNode,

  onKeyEvent: (event) {

    //final str = currentTextEditingValue.text;

    var str = currentTextEditingValue.text;



    /// BUG BUG BUG BUG BUG BUG BUG BUG BUG BUG BUG

    /// BUG CORRECTION

    /// Space key neglected whene entered (probably only in web version) but should be also possible as part for querying expression

    /// so update the input value with space as well

// print(

// 'str=[$str] eventtype=${event.runtimeType.toString()} str=$str event.data=${event.logicalKey.debugName}');

    if (event.runtimeType.toString() == 'KeyDownEvent' &&

        event.physicalKey.debugName == "Space" &&

        str.isNotEmpty) {

// print(

// 'str=[$str] eventtype=${event.runtimeType.toString()} str=$str event.data=${event.physicalKey.debugName}');

      final sd = str + ' ';

      updateEditingValue(

          TextEditingValue(text: sd, selection: TextSelection.collapsed(offset: sd.length)));

    }



    /// Make sure to filter event since without checking 'RawKeyDownEvent' will trigger this multiple times (2) because of RawKeyUpEvent



    ///

    /// BUG BUG BUG BUG BUG BUG BUG BUG BUG BUG BUG

    /// this never fires as we don't have RawKeyboardListener and this is correct behaviour as with KeyboardListener backspace works corrcet

    if (event.runtimeType.toString() ==

            'RawKeyDownEvent' && 

        event.logicalKey == LogicalKeyboardKey.backspace &&

        str.isNotEmpty) {

      final sd = str.substring(0, str.length - 1);

      print("sd=$sd");



      /// Make sure to also update cursor position using the TextSelection.collapsed.

      updateEditingValue(

          TextEditingValue(text: sd, selection: TextSelection.collapsed(offset: sd.length)));

    }

  },

  child: NotificationListener<SizeChangedLayoutNotification>(

    onNotification: (SizeChangedLayoutNotification val) {

      WidgetsBinding.instance.addPostFrameCallback((_) async {

        _suggestionsBoxController.overlayEntry?.markNeedsBuild();

      });

      return true;

    },

    child: SizeChangedLayoutNotifier(

      child: Column(

        children: <Widget>[

          GestureDetector(

            behavior: HitTestBehavior.opaque,

            onTap: () {

              requestKeyboard();

            },

            child: InputDecorator(

              decoration: widget.decoration,

              isFocused: _focusNode.hasFocus,

              isEmpty: _value.text.isEmpty && _chips.isEmpty,

              child: Wrap(

                crossAxisAlignment: WrapCrossAlignment.center,

                spacing: 4.0,

                runSpacing: 4.0,

                children: chipsChildren,

              ),

            ),

          ),

         CompositedTransformTarget(

            link: _layerLink,

            child: Container(),

          ),

        ],

      ),

    ),

  ),

);

From: joeatnovvia @.*** Sent: Thursday, August 04, 2022 12:27 AM To: danvick/flutter_chips_input Cc: Joze; Mention Subject: Re: [danvick/flutter_chips_input] Suggestions box falsely displayed on top of widget and not fully visible when ChipsInput is used in SingleChildScrollView (Issue #104)

@jozes https://github.com/jozes I was having problems with the Samsung keyboard not allowing me to type more than 1 character. I checked out your version of this: flutter_chips_input: git: https://github.com/jozes/flutter_chips_input.git

And for a Samsung keyboard, it still works a little funky: I can type more than 1 character, but when I type "jui" and then select "Juice Bar" off the list, it shows me I selected Juice Bar. And then the next thing I type makes "Juice Bar" disappear, and I see "juib" instead, as if I had just kept typing. Have you tested your fix on Samsung phones? Thanks! Joe

— Reply to this email directly, view it on GitHub https://github.com/danvick/flutter_chips_input/issues/104#issuecomment-1204547082 , or unsubscribe https://github.com/notifications/unsubscribe-auth/ADIMZ6NJ76CUB4VABVVKRGTVXLW4JANCNFSM5MCP4JSA . You are receiving this because you were mentioned. https://github.com/notifications/beacon/ADIMZ6KNWQQM7NMDC7OEADDVXLW4JA5CNFSM5MCP4JSKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOI7F64CQ.gif Message ID: @.***>