flutter_chips_input icon indicating copy to clipboard operation
flutter_chips_input copied to clipboard

Backspace button is not working on some Android devices (Samsung especially)

Open aj-989 opened this issue 3 years ago • 6 comments

On a few android devices (so far all from Samsung) the backspace on the virtual keyboard of the device, doesn't so anything. It doesnt delete chip nor text.

The same code works perfectly on all iOS devices and other Android devices.

I noticed that on Web, the backspace of a real keyboard, doesn't do anything.

So I tried to do this, in the chips_input code, I added this snippet:

RawKeyboardListener(
    focusNode: _effectiveFocusNode,
    onKey: (event) {
  if (event.isKeyPressed(LogicalKeyboardKey.backspace)) {
           setState(() {

      _value = _value.copyWith(
        text: "",
        selection: TextSelection.collapsed(offset: 0),
        composing: TextRange.empty,
      );
      });
})

so basically I m emptying manually the whole _value, and this works on the Android devices where the backspace is not working.

So this means that on those Android devices, the virtual keyboard is actually considered as a "RawKeyboard" as on those Devices, this listener is firing!

But the same code, on the devices where we have no issue with backspace, this code snippet does not fire!

Any suggestions? And how can I adjust the code, so when a "backspace" is found on a RawKeyboard, it just deletes the last character or removes the latest chip if no text.

aj-989 avatar Jul 21 '21 13:07 aj-989

I Have same problem

Esmail-Rahmani avatar Jul 26 '21 11:07 Esmail-Rahmani

Ive fixed this by wrapping the NotificationListener widget with RawKeyboardListener. override back space click.

return RawKeyboardListener(
      focusNode: _effectiveFocusNode,
      onKey: (event) {
        final str = currentTextEditingValue.text;
        /// Make sure to filter event since without checking 'RawKeyDownEvent' will trigger this multiple times (2) because of RawKeyUpEvent
        if (event.runtimeType.toString() == 'RawKeyDownEvent' &&
            event.logicalKey == LogicalKeyboardKey.backspace &&
            str.isNotEmpty) {
          final sd = str.substring(0, str.length - 1);
          /// 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: _effectiveFocusNode.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(),
              ),
            ],
          ),
        ),
      ),
    );

jorelkimcruz avatar Aug 19 '21 09:08 jorelkimcruz

getting same issue backspace bottom not working for samsung and vivo Phones.

please share solution if any exist .

Thank You...!

vijayvaghela72 avatar Dec 06 '21 05:12 vijayvaghela72

Ive fixed this by wrapping the NotificationListener widget with RawKeyboardListener. override back space click.

return RawKeyboardListener(
      focusNode: _effectiveFocusNode,
      onKey: (event) {
        final str = currentTextEditingValue.text;
        /// Make sure to filter event since without checking 'RawKeyDownEvent' will trigger this multiple times (2) because of RawKeyUpEvent
        if (event.runtimeType.toString() == 'RawKeyDownEvent' &&
            event.logicalKey == LogicalKeyboardKey.backspace &&
            str.isNotEmpty) {
          final sd = str.substring(0, str.length - 1);
          /// 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: _effectiveFocusNode.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(),
              ),
            ],
          ),
        ),
      ),
    );

Change as following to support 'emoji'.

RawKeyboardListener(
      focusNode: _effectiveFocusNode,
      onKey: (event) {
          ... 
          final sd = String.fromCharCodes(str.runes, 0, str.runes.length - 1);
          ...
      }

lanistor avatar Jul 31 '22 08:07 lanistor

Are there any outstanding PRs? @lanistor it would be great if you made one with that fix

novvia-dev avatar Sep 01 '22 18:09 novvia-dev

Forward here: https://github.com/flickerlist/flutter_chips_input/tree/br/1.10.1

Fix: android delete cannot be triggered in some devices
Fix: iOS Simulator Jiantipinyin cannot input

I cannot create a pull request, for version code management, i created from v1.10.0, which is not existed in danvick/flutter_chips_input, but existed in pub.dev.

lanistor avatar Sep 03 '22 06:09 lanistor