Create Tag Examples - Update example so that the new tag is created onEnter

[halocline]

Regarding the create and assign tags examples:

• https://design-system.hpe.design/components/tag#assigning-value-only-tags
• https://design-system.hpe.design/components/tag#assigning-name-value-tags)

We have received feedback that the UX would be improved for creating a new tag in the following manner:

Expected Behavior

Open select options --> enter new tag name into text input --> press Enter key --> tag name/value is created

as well as

Open select options --> enter new tag name into text input --> press down arrow to reach option "Create [text input value]" --> press Enter key --> tag name/value is created

Actual Behavior

The first option does not work. Only the second sequence.

---

The desired behavior is similar to adding a new label value to an issue in Github.

[halocline]

@kimkscott @danielm-hpe - Can you please review the above to see if it covers your needs? Are there any additional issues you feel should be included based on your implementation experience?

[halocline]

"This may be a nit, but when using tab to navigate between the controls I noticed that I could not start typing and have the input box accept the typing unless I hit space or enter to activate the dropdown. I think that if you have the control highlighted and start typing, it should automatically open and accept the letters you had been typing seamlessly without first needing to be activated/opened.

Ie: in this state with the name control selected, keyboard inputs are discarded/ignored until you press space or enter:"

[halocline]

"I have a question about the UX if the user tries to create a value before selecting a name. In the design system the select control closes without selecting the created value. I think this is an improvement over what the CCS and compute manager controls are doing. But I want to check if this is the intended UX.

I have some other questions that are probably more about the tag specification (https://confluence.arubanetworks.com/display/HPEUCP/Tag+specification) than the example.

The spec says: “Null is not allowed as a possible value for a tag key. Instead, empty string ("") will be supported to enable customers use tag key-value pair for a label use-case.”. To allow the empty string value, the compute UI allows the user to create a tag that only has a name. In this case we only show the name in the tag (without a colon or value). I’m not sure if this is the best approach. I don’t know if the example could include this. The spec also says “For a given resource, there can be only one value for a particular tag key”. In the compute UI, we show an error message if the user tries to assign 2 tags with the same name. I don’t know if the example could include this case."

[MikeKingdom]

The original design was there should always be a value but name was optional. I don't think it had any opinion on uniqueness either way.

[danielm-hpe]

"I have a question about the UX if the user tries to create a value before selecting a name. In the design system the select control closes without selecting the created value. I think this is an improvement over what the CCS and compute manager controls are doing. But I want to check if this is the intended UX.

Just +1 that there is likely a gap in the design system example when the user attempts to enter a value without a name selected. When you click the "create" option in the value select when no name is selected, "nothing" happens. This part of the example should be clearer. If the user can't enter a value first, there should be some feedback to let them know that instead of just nothing happening (smells like a bug).

Summarizing other issues

1. using tab to cycle between the selects, you have to push space or enter first to open the select before you can start typing. I think that you should be able to just start typing without the click/space/enter to open the select.
2. pressing enter while the text input portion of the select has focus doesn't do anything- expected that it should "create" the text that's currently entered into the text input

I can confirm that while typing in the text input you can use the up/down keys to select an option and press enter for it to select that option. This behavior should be preserved.

[halocline]

Bumping this back into "Triage" due to additional commentary and continued interest.