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 2b66604 (old and superseded: 542e73e)

1.mov

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 2c8ccab and e6381e3

3.mp4

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. b35a43e fixes this by showing all suggestion after selection

5.mov

6. 16e6788 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 Keep highlight in select mode #1420)

As a bonus: I now found where the commit I was talking in #1408 (comment) belongs to, and it is here! As a consequence of e6381e3 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 5ae3c62 Superseded by d9d9ece

[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]

#1414 depends on this

[Massi-X]

So it seems like you fixed #1408 and 5ae3c62 in a similar fashion with d9d9ece
I'm going to revert that commit

[Massi-X]

Commit 41178f7

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

1.mov

[Massi-X]

This is needed to prevent the dropdown from closing even when closeOnSelect is false

[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...)