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

[Massi-X]

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]

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]

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]

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

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

3. 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

4. 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

5. 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

6. 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~ EDIT: this is #1420)

~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~ Superseded by https://github.com/yairEO/tagify/commit/d9d9ecedece7e3461c4575757326aab0ab0ab42c

[yairEO]

Hi, I cannot reproduce much of your videos because I don't know your exact Tagify configurations, so I cannot personally confirm the issues. Can you please share it here?

[Massi-X]

Sorry I'm not on my PC, it should be about like this. I used a stripped down version with less settings but I don't have it on hand right now. Tell me if this is enough (I tried on jsbin and all the issues were present)

tagify = new Tagify(elem), {
   enforceWhitelist: true,
   whitelist: whitelist,
   dropdown: {
	enabled: 0,
	closeOnSelect: false,
	mapValueTo: 'name',
	searchKeys: ['name', 'value'],
	includeSelectedTags: true,
	maxItems: Infinity
   },
   mode: "select",
   tagTextProp: 'name',
   originalInputValueFormat: valuesArr => valuesArr.map(item => item.value)
});

UPDATE with real code

[Massi-X]

So it seems like you fixed #1408 and https://github.com/yairEO/tagify/commit/5ae3c627f67c7085a0b54086cdaf2bfd69e54e5b in a similar fashion with https://github.com/yairEO/tagify/commit/d9d9ecedece7e3461c4575757326aab0ab0ab42c I'm going to revert that commit

[Massi-X]

Commit https://github.com/yairEO/tagify/pull/1410/commits/41178f7dd5a80fe69878f2543a2e9591752268ad

I found another issue... Added here (see video). I have tested on jsbin too the only difference here is that because the dropdown closes you can't see the bug (the dropdown closing is itself a bug, given the option to not close it is present).

When you click on the input and you are in edit mode (caret blinking), if you select a suggestion with the mouse the checkmark won't be updated (in the video only on second click because I exited edit mode).

https://github.com/user-attachments/assets/2bc493e9-31a0-4eb2-8397-546064309e7a

[yairEO]

Sorry I am too slow to respond to your well-done detective work! Never did I have any contributor as eager as you are.

I work a very demanding full-time job (as a frontend developer) and have so little time for other things. I also have much more (personal) open source and non-open-source projects to maintain...

So mostly the only time I have is a little over the weekend

[Massi-X]

The same for me 🤣 except that I do my things at night 🌉

I suspected you were only available on the weekends but no worry I'm not here to rush you. I've implemented the changes in production on my module so we can also have a reality check (small as it is...)