[Combobox] add min-items property and require a minimum number of chips

[avezina]

Description

Provide the option to set a required minimum number of chips selected.

Acceptance Criteria

• By default, no min is set.
• If a min is set:
  • then the user cannot dismiss chips any further once the limit is met
  • the input is invalid until the min number of chips is met
• The item that was initially selected does not need to be the one that remains: once adding more chips, a user can also dismiss the initial one

Suggestions:

Perhaps we don't need to remove the dismiss (x) button from the min chips, but instead provide the required UI (e.g. red outline and hint) as for a required input, with a message for how many inputs are expected. This would require more error handling, but would be more in line with how this type of requirement is usually implemented?

So basically, a default chip value or values can be set, or none.
If none, or if the minimum is not met, the Combobox needs to display a required UI (red outline input box and hint text for the required number of chips).

Relevant Info

Related enhancement for maxChipsDisplayed: #4326 - but in our user case no max needs to be defined.

Which Component

Calcite-Combobox

Example Use Case

Working with Electric Utility Network data and the JSAPI UtilityNetworkTrace widget.
A user wants to run a Downstream trace to identify assets downstream from an Electrical Switch asset.
The Electrical Switch has 4 positions. The end user may select one of many positions the Trace can start from or end at.
In the Combobox, the default position chip is always selected as a minimum. The user can add more positions (up to 4 in this case), but there must always be at least one position selected.

This is only a simple example. In Telecom, there could be hundreds and thousands of terminals (think a patch panel where hundreds/thousands of terminals where fiber optic strands would connect to) - the Combobox makes it easy to search for a value and dismiss seelcted chips.

[geospatialem]

Reassigning to June for design considerations prior to development implementation.

[ashetland]

After many discussions with the team, in order to keep the user in control, we’ve decided the best path forward is to not prevent closing of chips / deselecting of items. If the user deselects too many items the input will be marked invalid, notifying the user that a correction needs to be made. Input Message should be used to explain the error state.

This allows for a simple interaction that does not force the user into a workflow of having to first select extra items just to remove a previous selection. It also prevents possible confusion / frustration about why they’re being prevented from removing a selection.

Prop name

Suggested name for this prop is min-selection. This is to not confuse it with max-items which has an unrelated purpose.

Invalid styling

Invalid styling should match calcite-input. Updated invalid styling may result from #4598.

When does this happen?

Combobox would be marked invalid onblur. This is to prevent an invalid state while the user is making an initial selection.

While closed, Combobox would be marked invalid when the user removes too many item chips. When then opened, it would remain invalid until the user selects the required minimum.

cc @jcfranco

[github-actions]

cc @geospatialem, @brittneytewks

[eriklharper]

Confirmed via chat that this is acceptable with @avezina: workaround is to simply set status="invalid" and validationMessage when the desired minimum selection is not met. Something along these lines:

if (this.minSelection > 0 && this.selectedItems.length < this.minSelection) {
  this.status = "invalid";
  // TODO: use translated messages here
  this.validationMessage = `This field requires at least ${this.minSelection} item${this.minSelection > 1 ? "s" : ""} to be selected.`;
} else {
  this.status = "valid";
  this.validationMessage = "";
}