If you start to add tag (with @) and then move cursor to another position - menu is not disappearing and you can't select any value from it

yairEO / tagify

🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue

https://yaireo.github.io/tagify/

Other

3.51k stars 431 forks source link

If you start to add tag (with @) and then move cursor to another position - menu is not disappearing and you can't select any value from it #761

Open Megas78 opened 3 years ago

Megas78 commented 3 years ago

Prerequisites

[x] I am running the latest version
[ ] I checked the documentation and found no answer
[ ] I checked to make sure that this issue has not already been filed

💥 Demo Page

https://jsbin.com/jekuqap/edit?html,js,output

React issue template: https://codesandbox.io/s/tagify-react-issue-template-4ub1r?file=/src/index.js

Explanation

What is the expected behavior?
If cursor is moving away form @ symbol then menu should disappear. If you go back and put cursor after @ then it should appear again
What is happening instead?
Menu is open and you can't select any value from it
What error message are you getting?

yairEO commented 3 years ago

You are using incorrect terms: "cursor" = caret "menu" = dropdown suggestions list

I will try to see what is the bug since I don't fully understand because you did not write the steps needed to be made to replicate the issue.

You need to write exactly what did you do so I can do it also..I have no idea what "moving away form @ symbol" means, it's something that makes sense for you, but not for me

Megas78 commented 3 years ago

Hello! I reproduced it in Mac OS Big Sur 11.2.1 in all browsers.

With proper terms:

I started to add tag with #mr
After it I did not select any value from dropdown suggestions list and just moved cared using left arrow button on my keyboard.
Dropdown suggestions list did not disappear and I can't select any item from suggestions list.

Please check attached video. https://user-images.githubusercontent.com/19715177/109265654-8ff56a00-780f-11eb-8d21-2d874345632e.mov

Expected behaviour video.

https://user-images.githubusercontent.com/19715177/109266648-f9c24380-7810-11eb-8169-64b13f03fcc9.mov

Big thanks for your efforts!

yairEO commented 3 years ago

I assume del key on Mac is only when pressing fn + ⌫ (backspace)

simply hitting the backspace key at the end, as per your instructions, does not cause the bug, but simulate DELTE with the fn key does remove the tag when it shouldn't, although I am curious why are you using DELETE and not BACKSPACE

mayanktiwaridotcom commented 3 years ago

Hi @yairEO I think this is something similar to what I have been facing, is there any expected date for the solution for this ?

I start typing with @ and dropdown appears and because I am using highlightFirst first value from dropdoown list is selected, but when i click on it or press enter it doesn't get added to tags.