Pasting various ideas around this from previous threads:

In T337095#9063741, @bmartinezcalvo wrote:

@AAlhazwani-WMF thank you for flagging this. I view 4 possible options to solve this:

• Op.1: we could use the input's placeholder to explain that user needs to press ENTER (as you comment above)
• Op.2: we could use the Field’s helper text to explain that user needs to press ENTER (as you comment above)
• Op.3: we could just display the error state if the text was not submitted, indicating that user needs to press ENTER to submit it
• Op.4: text could turn into a FilterChip when moving focus (as you comment above)

I've prepared these proposals explaining how the FilterChipInput would be displayed on 1. Default state, 2. Focus-active, 3. If user clicks or moves the focus outside the input.

Anyway, I would use the placeholder to indicate the user that they need to type the alias there. @AnneT the placeholder is missing in the Codex demo, could we include it as prop as we have in other components such as TextInput?

In T337095#9064026, @AnneT wrote:

@bmartinezcalvo I can add placeholder to the configurable demo

That said, I would recommend against using placeholder to explain the fundamental interactivity of the input. It should be used to give a hint to the kinds of values that are expected. I think the Wikifunctions user testing points to a pretty significant usability issue for this component, and we should not expect users of the component to add help text to fix this.

What about adding an "Add" button, similar to search input, that adds a new chip with the current input value? That would provide a clear way to add chips, while still allowing for enter keypresses for more experienced users.

In T337095#9064573, @CCiufo-WMF wrote:

In practice, I only recall seeing an explicit "add" button for chip input type patterns when the chips do not remain in the input field once submitted. In those cases, the chips are usually populated below the input field, and the input is exclusively used to add 1 new chip (either by pressing the input submit button or hitting the enter key).

I feel like I've almost always seen some form of dropdown menu to signal adding a chip when the chips stay within the input after they are added/created (like this). That being said, autocomplete might not always be desired, and this same library has an example of what we currently have implemented + the placeholder proposal discussed above.

• Determine if the existing experience is even an issue.

@CCiufo-WMF sharing some more tasks and comments left by the Wikifunctions community.

• https://www.wikifunctions.org/wiki/Wikifunctions:Project_chat#Aliases_of_a_function_name
  • "I've tried to enter aliases for a function name. After saving and then reopening, I couldn't see them anywhere, so this seems to be a missing feature. Have I missed something?"
• T345301: Function aliases edit interface is confusing / easy to misuse
• T326304: ChipContainer: The component is in a confusing state when writing a string but not submitting it

last week we conducted a series of usability study on the function editor page on wikifunctions https://www.wikifunctions.org/w/index.php?title=Special:CreateObject&zid=Z8. we observe that 100% of the participants who provided a function alias did not press the return/enter key to submit said alias.

(being aware that the team is at an offsite next week) is there space to prioritize this task @CCiufo-WMF once you're back? in the meantime, some ideas as food for thoughts:

1. driving inspiration from the OOUI TagMultiselectWidget we could use a similar solution with the addition of a call to action too. thou it feels a bit too overly designed and probably too crowded, especially on mobile
   
2. rely on direct manipulation and content-visual parity and create an empty chip when people focus a chip container
   

and here how the 2 options might work in page

In T346284#9323199, @AAlhazwani-WMF wrote:

last week we conducted a series of usability study on the function editor page on wikifunctions https://www.wikifunctions.org/w/index.php?title=Special:CreateObject&zid=Z8. we observe that 100% of the participants who provided a function alias did not press the return/enter key to submit said alias.

(being aware that the team is at an offsite next week) is there space to prioritize this task @CCiufo-WMF once you're back? in the meantime, some ideas as food for thoughts:

1. driving inspiration from the OOUI TagMultiselectWidget we could use a similar solution with the addition of a call to action too. thou it feels a bit too overly designed and probably too crowded, especially on mobile
   

@AAlhazwani-WMF I agree with the option with the button to increase the usability of the component in some cases. We also use the option with the button in some other components such as the SearchInput. If we finally implement it, I would go with a simplified button content (e.g. "+ Add") so the button doesn't occupy too much space in small screens.

2. rely on direct manipulation and content-visual parity and create an empty chip when people focus a chip container
   

and here how the 2 options might work in page

I don't really understand why we need this use case. Anyway, currently in the ChipInput in Codex the chips become input text when clicking on them, so the chip's edition is not within the chip itself.

In T346284#9366659, @bmartinezcalvo wrote:

@AAlhazwani-WMF I agree with the option with the button to increase the usability of the component in some cases. We also use the option with the button in some other components such as the SearchInput. If we finally implement it, I would go with a simplified button content (e.g. "+ Add") so the button doesn't occupy too much space in small screens.

+1! there might be even enough context to use a icon-only button.

I don't really understand why we need this use case. Anyway, currently in the ChipInput in Codex the chips become input text when clicking on them, so the chip's edition is not within the chip itself.

ohhh but i see a new behaviour for the ChipInput now (gif below)! if you enter some text, and then you escape the focus, it turns the entered text to a chip. this is already helpful, thank you @bmartinezcalvo!