feat: picker zero selection (#6780)

* picker zero items * Change files * prettier * default to null * update files
microsoft · Aug 8, 2023 · e0d4cb4 · e0d4cb4
1 parent 50dba9c
commit e0d4cb4
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 14 deletions.
diff --git a/change/@microsoft-fast-foundation-2b6fd22d-b799-4e12-ba59-696ca95be77b.json b/change/@microsoft-fast-foundation-2b6fd22d-b799-4e12-ba59-696ca95be77b.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "picker zero items",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}
diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
@@ -1547,7 +1547,7 @@ export class FASTPicker extends FormAssociatedPicker {
     // (undocumented)
     protected listItemTemplateChanged(): void;
     loadingText: string;
-    maxSelected: number | undefined;
+    maxSelected: number | null;
     // @internal
     menuConfig: AnchoredRegionConfig;
     // @internal

diff --git a/packages/web-components/fast-foundation/src/picker/README.md b/packages/web-components/fast-foundation/src/picker/README.md
@@ -195,7 +195,7 @@ export class FASTTextField extends TextField {}
 | `options`                    | public  | `string`                    |                              | Currently available options. Comma delineated string ie. "apples,oranges".                                                    |                      |
 | `filterSelected`             | public  | `boolean`                   | `true`                       | Whether the component should remove an option from the list when it is in the selection                                       |                      |
 | `filterQuery`                | public  | `boolean`                   | `true`                       | Whether the component should remove options based on the current query                                                        |                      |
-| `maxSelected`                | public  | `number or undefined`       |                              | The maximum number of items that can be selected.                                                                             |                      |
+| `maxSelected`                | public  | `number or null`            | `null`                       | The maximum number of items that can be selected.                                                                             |                      |
 | `noSuggestionsText`          | public  | `string`                    | `"No suggestions available"` | The text to present to assistive technolgies when no suggestions are available.                                               |                      |
 | `suggestionsAvailableText`   | public  | `string`                    | `"Suggestions available"`    | The text to present to assistive technolgies when suggestions are available.                                                  |                      |
 | `loadingText`                | public  | `string`                    | `"Loading suggestions"`      | The text to present to assistive technologies when suggestions are loading.                                                   |                      |

diff --git a/packages/web-components/fast-foundation/src/picker/picker.spec.md b/packages/web-components/fast-foundation/src/picker/picker.spec.md
@@ -42,7 +42,7 @@ Picker is the top level container which hosts both a `picker-list` component to
 *Attributes:*
 - `selection`: List of currently selected items. Comma delineated string ie. "apples,oranges".
 - `options`: Currently available options. Comma delineated string ie. "apples,oranges".
-- `max-selected`: The maximum number of items that can be selected.  Unset by default (ie. no maximum).
+- `max-selected`: The maximum number of items that can be selected.  Unset by default (ie. no maximum).  If the value is "0" selecting an item updates the query instead.
 - `no-suggestions-text`: The text to present when no suggestions are available.
 - `suggestions-available-text`: The text to present when suggestions are available.
 - `loading-text`: The text to present when suggestions are loading. 

diff --git a/packages/web-components/fast-foundation/src/picker/picker.ts b/packages/web-components/fast-foundation/src/picker/picker.ts
@@ -2,6 +2,7 @@ import {
     attr,
     html,
     HTMLView,
+    nullableNumberConverter,
     observable,
     oneWay,
     ref,
@@ -117,8 +118,8 @@ export class FASTPicker extends FormAssociatedPicker {
      * @remarks
      * HTML Attribute: max-selected
      */
-    @attr({ attribute: "max-selected" })
-    public maxSelected: number | undefined;
+    @attr({ attribute: "max-selected", converter: nullableNumberConverter })
+    public maxSelected: number | null = null;
 
     /**
      * The text to present to assistive technolgies when no suggestions are available.
@@ -806,7 +807,8 @@ export class FASTPicker extends FormAssociatedPicker {
             return;
         }
         if (
-            this.maxSelected !== undefined &&
+            this.maxSelected !== null &&
+            this.maxSelected !== 0 &&
             this.selectedItems.length >= this.maxSelected
         ) {
             if (this.getRootActiveElement() === this.inputElement) {
@@ -867,21 +869,22 @@ export class FASTPicker extends FormAssociatedPicker {
             return false;
         }
 
-        if (e.target instanceof FASTPickerMenuOption) {
-            if (e.target.value !== undefined) {
+        if (e.target instanceof FASTPickerMenuOption && e.target.value !== undefined) {
+            if (this.maxSelected === 0) {
+                // if we don't allow selection just update the query
+                this.query = e.target.value;
+            } else {
+                this.query = "";
                 this.selection = `${this.selection}${this.selection === "" ? "" : ","}${
                     e.target.value
                 }`;
             }
-            this.inputElement.value = "";
-            this.query = "";
-            this.inputElement.focus();
+
             this.toggleFlyout(false);
+            this.inputElement.focus();
             return false;
         }
 
-        // const value: string = (e.target as PickerMenuOption).value;
-
         return true;
     }
 
@@ -913,7 +916,7 @@ export class FASTPicker extends FormAssociatedPicker {
             );
             if (newFocusedItemIndex === selectedItemsAsElements.length) {
                 if (
-                    this.maxSelected !== undefined &&
+                    this.maxSelected !== null &&
                     this.selectedItems.length >= this.maxSelected
                 ) {
                     (