search

yairEO / tagify

🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue
https://yaireo.github.io/tagify/
Other
3.56k stars 436 forks source link

Delete key, focus/blur and dropdown improvements for select mode with userInput #1410

Open Massi-X opened 1 week ago

Massi-X commented 1 week ago

1: When you Tab into the input and then immediately click backspace the focus was lost. This PR fixes the behavior by only removing tags after blur, so that we can still write into the input.

2: ~Previously the focus class remained even after leaving the input, fixed by adding a "Tab" handler for select mode too.~

3: Previously the dropdown stayed open when navigating with tab key (related to point 2), fixed by adding a "Tab" handler for select mode too.

4: The input focus was inconsistent on suggestion selection with a tag present or not, fixed by regaining focus to the input every time a suggestion is clicked.

5: Repopulate suggestions dropdown after selection (currently the dropdown is stuck to a partial state, which is not very desirable in select mode).

6: Do not highlight next option when in select mode (this is not desired, the current one is still present unlike the other modes).

yairEO commented 2 days ago

I need videos showcasing the things these changes are trying to solve.. I do not understand from the description what exactly is the situation for each of your changes and I cannot blindly merge such sensitive changes without completely understanding the problems first and am able to reproduce myself

I am a Windows user and this is my favorite video capturing software: https://www.screentogif.com

Massi-X commented 1 day ago

I'm going to first push some commits because of the changes in 4.32.1 and also 'cause I find better ways to do things... I will update you with videos too.

Massi-X commented 6 hours ago

OK, I have videos for all the parts of this commit and I'm going to step through that one at a time. First some notes: I have updated to 4.32.1 and reapplied the patches one by one to confirm the issues are still present. In the videos attached I'm using my implementation because it was easier for me, but I tried everything on jsbin with a "regular" install and it is the same.

  1. Tab into input and click backspace, the input loses focus. Fixed with commit https://github.com/yairEO/tagify/pull/1410/commits/2b66604e976e9843818856b3971505b7c8bbd674 (old and superseded: https://github.com/yairEO/tagify/pull/1410/commits/542e73e4ea21e963026b1571f4f0e6a3b268ec91)

https://github.com/user-attachments/assets/1fec883e-c3cc-49c2-9d11-e21bb4a17ff6

  1. Not applicable anymore in 4.32.1 but it was a consequence of other commits, nothing to revert

  2. Tab into the input so the dropdown opens, now click a suggestion with the mouse. If you now try to click outside the input the dropdown won't close until you focus it again, if you instead try to "tab" out the focus went back to the top of the page (because the focus after the selection was on the dropdown and not on the input). Fixed with commit https://github.com/yairEO/tagify/pull/1410/commits/2c8ccabf7a1f14f917212b7d917b9c17358de38c and https://github.com/yairEO/tagify/pull/1410/commits/e6381e3785eeffd40a3516903cc577a8efbb7fe0

https://github.com/user-attachments/assets/fb1b4189-f902-4c19-83e8-2fb761bec1a8

  1. For the video look at 3. I try to explain this one better: When you select a suggestion, the input didn't regain focus most of the time. The input should always get the focus back after a selection, this was already in the code (DOM.input.focus()) but didn't work because in select mode the element to focus is .tagify__tag-text

  2. If you start to input some text you will end up with a filtered suggestion list; that's fine but after you select something the list is still filtered. I understand this is correct behavior for the other modes, but for select is not desirable. To bring back the full list it's necessary to close and reopen the dropdown. https://github.com/yairEO/tagify/pull/1410/commits/b35a43ef7cd0b0c2d70af0aaa7bca0ffc00ed5a0 fixes this by showing all suggestion after selection

https://github.com/user-attachments/assets/19105671-c4ce-4478-8c75-c7b8117976ab

  1. https://github.com/yairEO/tagify/pull/1410/commits/16e678838a67c509bac4a5e226716369293759ba Isn't really an issue cause right now the highlight goes back to the first option anyway so I can't show this in a video. It was for future proofing (I'm working on keeping the highlight in the same spot and some other things with another PR)

As a bonus: I now found where the commit I was talking in https://github.com/yairEO/tagify/pull/1408#issuecomment-2495958939 belongs to, and it is here! As a consequence of https://github.com/yairEO/tagify/pull/1410/commits/e6381e3785eeffd40a3516903cc577a8efbb7fe0 the dropdown does not close in every case, and the global handler onClickAnywhere fails because the search for target.closest(".tagify__dropdown") returns null. I moved that commit here https://github.com/yairEO/tagify/pull/1410/commits/5ae3c627f67c7085a0b54086cdaf2bfd69e54e5b