flutter_chips_input icon indicating copy to clipboard operation
flutter_chips_input copied to clipboard

Disappearing chip after typing only 1 character.

Open Albert221 opened this issue 5 years ago • 21 comments

Hey! My problem is as following and I'm pretty sure it's a problem with the library because my code is the code from example but only attached to my state.

Steps to reproduce

Type only one character into the input and select something from suggestions, then start typing again. The just added chip disappears and it becomes an ordinary text.

When you put only two characters it doesn't happen. When you select a suggestion without typing anything, it doesn't happen too.

Demo

ezgif-2-308b2ee43944

Albert221 avatar Apr 08 '20 16:04 Albert221

Hi @Albert221, Kindly note that the reason why the option is not suggested the second time you're trying to type is that you have already picked the option.

Unless I'm misunderstanding the issue.

danvick avatar Apr 13 '20 11:04 danvick

Let me explain the issue in more detail.

When I type a in the input I have the Alpha suggestion, which is fine. I then select this suggestion so it appears in the input as this Alpha chip. Here's the problem: after that when I type another character, the chip disappears and is replaced with the a character from the very beginning. I reckon that's unwanted behavior. When I selected the chip it should stay there unless I delete it with keyboard or state.deleteChip(), not when I type more stuff into the input.

I hope you understand my issue now.

Albert221 avatar Apr 13 '20 12:04 Albert221

I now get the point. That would be highly undesirable behavior.

I've however tried to reproduce this issue to no avail.

Could you kindly share versions of the package or Flutter channel you're on?

danvick avatar Apr 14 '20 13:04 danvick

I created a simple repository with some code to reproduce the issue: https://github.com/Albert221/flutter_chips_input_issue_34

Just clone the repo, run flutter pub get and then flutter run and do the following to replicate the issue:

  1. Tap on the input
  2. Type a
  3. Tap the Alpha suggestion
  4. Type a

You should see aa in the input field instead of <Alpha> a.


I've also created a Flutter Driver test, but it's not working as expected, but you can run it with

flutter drive --target=test_driver/app.dart

Here's my flutter --version:

Flutter 1.16.4-pre.50 • channel dev • https://github.com/flutter/flutter.git    
Framework • revision d14a301e41 (2 weeks ago) • 2020-03-31 19:14:22 -0400       
Engine • revision fc5b44c901
Tools • Dart 2.8.0 (build 2.8.0-dev.18.0 e8c4aed700)

Albert221 avatar Apr 14 '20 18:04 Albert221

@danvick were you able to correctly reproduce the issue?

Albert221 avatar Apr 17 '20 09:04 Albert221

Not even with your dev channel.

danvick avatar Apr 21 '20 20:04 danvick

Hi, I was able to reproduce this bug. (on Android, iOS works fine)

Android Emulator + input from PC keyboard

demo pc kb

Android Emulator + input from on-screen keyboard demo

iOS Simulator + input from PC keyboard demo1

Flutter version output:

Flutter 1.17.0 • channel beta • https://github.com/flutter/flutter.git
Framework • revision d3ed9ec945 (2 weeks ago) • 2020-04-06 14:07:34 -0700
Engine • revision c9506cb8e9
Tools • Dart 2.8.0 (build 2.8.0-dev.18.0 eea9717938)

Flutter Doctor output:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v1.17.0, on Mac OS X 10.15.4 19E287, locale en-PL)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3)
[✓] Chrome - develop for the web
[!] Android Studio (version 3.6)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] IntelliJ IDEA Ultimate Edition (version 2020.1)
[✓] VS Code (version 1.44.2)
[✓] Connected device (3 available)

! Doctor found issues in 1 category.

bartekpacia avatar Apr 21 '20 21:04 bartekpacia

I have the same problem on my android emulator. The problem is the first character is saved on the first time.

I you type 'a' and select 'Alpha', next if you directly type 'b', the first chips disappears and there is 'ab' written on the inputchips.

Seems the text is not cleared after the first chip selection.

MobiliteDev avatar May 07 '20 11:05 MobiliteDev

Thanks for shedding more light on this @bartekpacia.

I've finally been able to reproduce. So just to be clear this issue occurs only:

  1. When using the Android Emulator - not on Android device
  2. When using the on-screen emulator keyboard

Right?

I'll try to investigate the cause of the bug and see. I suspect it may be a Flutter issue related to #1

danvick avatar Jun 06 '20 21:06 danvick

@danvick Thanks for investigating, but happens to me also on a physical device

KarnerTh avatar Jun 07 '20 09:06 KarnerTh

It happens on physical devices too and using both physical and onscreen keyboard

Albert221 avatar Jun 07 '20 09:06 Albert221

Noted @Albert221 @KarnerTh.

I think I've found the culprit. Let me now work on a fix.

danvick avatar Jun 07 '20 11:06 danvick

Not quite yet. I'll reopen this.

danvick avatar Jun 14 '20 12:06 danvick

I have the same problem too on an Android device, but not on an Android emulator

fildabert avatar Jun 24 '20 08:06 fildabert

Having the very same issue, both on Android Emulator and devices.

tbillson avatar Jun 26 '20 15:06 tbillson

This issues only happens on the very first chip. I hope it throws some light on the subject

tbillson avatar Jun 28 '20 18:06 tbillson

Which (data) are you referring to? profile? Didn't work here. I might be missing something.

Em qui., 9 de jul. de 2020 às 21:40, VitorSoaresDev1 < [email protected]> escreveu:

It happened to me aswell. I've changed the onTap method on suggestionBuilder to "() => _chipKey.currentState.selectSuggestion(data),". Please test and see if it's a valid workaround.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/danvick/flutter_chips_input/issues/34#issuecomment-656418891, or unsubscribe https://github.com/notifications/unsubscribe-auth/AELGGH2OEJJDEPIZS5H4YOTR2ZPPZANCNFSM4MECQMXA .

tbillson avatar Jul 10 '20 01:07 tbillson

So I've been looking into this as well after experiencing this issue myself. As far as I can tell, selecting a suggestion after typing one character causes the _updateTextInputState method to update the _textInputConnection as expected, except on the next trigger of updateEditingValue, the value appears to not have taken into account the aforementioned update.

One workaround that has worked for me is to simply recreate the text input connection on every text input state change. This can be found at https://github.com/Mosc/flutter_chips_input/commit/321544efea98a056ab94e066453ad4d2b841b1b6. I'm hesitant to create a pull request because this doesn't feel like a proper fix, yet it might help out others who experience the same issue. Please don't count on my fork being available forever, but try it out by updating your pubspec.yaml as follows:

flutter_chips_input:
  git:
    url: https://github.com/Mosc/flutter_chips_input
    ref: 321544efea98a056ab94e066453ad4d2b841b1b6

Mosc avatar Sep 01 '20 07:09 Mosc

The fix released in v1.9.4 unfortunately breaks flutter web usage. Using v.1.9.4 in web, one can no longer put in more than one character (tested on Chrome/MacOS).

steffenhaak avatar Sep 12 '20 12:09 steffenhaak

The fix released in v1.9.4 unfortunately breaks flutter web usage. Using v.1.9.4 in web, one can no longer put in more than one character (tested on Chrome/MacOS).

That happened to me too! You can type only one character in web in all versions: 1.9.4, 1.9.0, 1.7.0

FtADev avatar Sep 28 '20 11:09 FtADev

For those still using this library, I have given up on waiting for danvick and created a new fork. I've integrated all of the open PRs and fixed a bug or two. Still working on another bug related to backspace on macOS.

https://github.com/nlfiedler/choose_input_chips

nlfiedler avatar Mar 16 '23 04:03 nlfiedler