Component: Tag Input, or StringArrayEditor.jsx

[Gazook89]

Been looking at the StringArrayEditor component, otherwise known as the Tag Input, and considering options.

Relevant Issues:
#2333
#2335
#3462
#3166
#2357

Relevant PR:
#3469

Keyboard

• , | Enter to submit tag and move to next input
• Arrow keys to highlight and move between submitted tags
• ArrowLeft from 'new tag' input, if empty, moves to previous submitted tag, if it exists
• Enter | Space to edit existing tag
• Escape to cease editing and not save changes, and focus same tag
• , | Enter to submit change to existing tag, and focus "new tag" input
• Delete to remove an existing focused tag
• Tab to enter, and exit, tag container. When entering, focus the "new tag" input

Mouse

• onMouseUp on existing tag to edit (single click to start editing)
• onMouseUp on X button to delete existing tag
• onMouseUp outside of existing tag while editing to submit without revision

Layout

<tag-container>
	<tag>    // submitted
		<span class='text visible'>{tag text}</span>
		<input class='input hidden' />
		<datalist>...</datalist>
		<button class='delete'>X</button>
	</tag>
	<tag>     // active editing
		<span class='text hidden'>{tag text}</span>
		<input class='input visible' />
		<datalist>...</datalist>
		<button class='delete'>X</button>
	</tag>
	<input class='new-tag-input' />
	<datalist>...</datalist>
</tag-container>

Does there need to be 'undo' and 'submit' buttons when editing tags? I don't commonly see it, and I think the keyboard interaction is intuitive enough. moving your hand to the mouse to click 'submit' after each tag seems really cumbersome.

Regarding datalist: mantine.dev component library has a nice looking tag input, which features 'suggested tags' that can also be grouped. We can possibly incorporate our existing combobox component to do this.

Validation

• allow &
• .trim() input
• case-insensitive entry, but submit as lowercase (thoughts?)

Props

• label
• values
• valuePatterns
• validators
• placeholder
• notes
• unique
• cannotEdit
• datalist options
• onChange

Preview

Here is what I have so far. Not much styling yet.

[ericscheid]

case-insensitive entry, but submit as lowercase (thoughts?)

For tag-schemes only.

We already force-case tag-schemes elswhere (userpage, for classname reasons).

There is value in tags themselves retaining cases when displayed (though should be treated case-insensitively when searching etc)

[Gazook89]

so just to be clear, tag-schemes = the part before the colon?

[dbolack-ab]

The question of Undo and submit falls into usage philosophy for me. If every tag submission is a doc update, then no undo or submit. If the document tags are not updated until a "mass" save, I would consider an undo option

[5e-Cleric]

Could we, maybe possibly consider the dumb idea of.. idk, changing the name of the file to tagInput.jsx? way easier to understand.

[ericscheid]

This component is also used for entering invited authors.

[Gazook89]

I support tagInput.jsx as well. From my searching on the web, it seems to be a common name for this type of input component. StringArrayEditor is a little unwieldy

[5e-Cleric]

also remember #3284