Remove prescriptive rendering of FASTSelect and adds placeholder content

change/@microsoft-fast-foundation-1ae84860-8dff-4c1d-ae22-0a066b9f5f48.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "select: removes prescriptive rendering of select as listbox",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/web-components/fast-foundation/src/select/README.md

@@ -115,9 +115,9 @@ See [listbox-option](/docs/components/listbox-option) for more information.
 
 #### Attributes
 
-| Name | Field    | Inherited From |
-| ---- | -------- | -------------- |
-|      | multiple | FASTListbox    |
+| Name | Field        | Inherited From |
+| ---- | ------------ | -------------- |
+|      | multiple     | FASTListbox    |
 
 <hr/>
 
@@ -148,6 +148,7 @@ See [listbox-option](/docs/components/listbox-option) for more information.
 | `disabled`         | public    | `boolean`             |         | The disabled state of the listbox.                   | FASTListbox          |
 | `selectedIndex`    | public    | `number`              | `-1`    | The index of the selected option.                    | FASTListbox          |
 | `selectedOptions`  | public    | `FASTListboxOption[]` | `[]`    | A collection of the selected options.                | FASTListbox          |
+| `listboxMode`      | public    | `boolean`             | `false` | Indicates if the select renders as a listbox only    | FASTSelect         |
 
 #### Methods
 
@@ -167,10 +168,12 @@ See [listbox-option](/docs/components/listbox-option) for more information.
 
 #### Attributes
 
-| Name   | Field    | Inherited From |
-| ------ | -------- | -------------- |
-| `open` | open     |                |
-|        | multiple | FASTListbox    |
+| Name           | Field       | Inherited From |
+| -------------- | ----------- | -------------- |
+| `open`         | open        |                |
+| `multiple`     | multiple    | FASTListbox    |
+| `listbox-mode` | listboxMode | FASTSelect     |
+
 
 #### CSS Parts
 

packages/web-components/fast-foundation/src/select/select.pw.spec.ts

@@ -283,6 +283,68 @@ test.describe("Select", () => {
         await expect(listbox).toBeVisible();
     });
 
+    test("pressing Enter key while closed should open the dropdown", async () => {
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+            <fast-select>
+              <fast-option>Option 1</fast-option>
+              <fast-option>Option 2</fast-option>
+              <fast-option>Option 3</fast-option>
+            </fast-select>
+          `;
+        });
+
+        await element.evaluate((node: FASTSelect) => {
+            const event = new KeyboardEvent("keydown", { key: "Enter" });
+            node.dispatchEvent(event);
+        });
+
+        await expect(element).toHaveBooleanAttribute("open");
+    });
+
+    test("should select an option when the Enter key is pressed and the select is open", async () => {
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+            <fast-select>
+              <fast-option>Option 1</fast-option>
+              <fast-option>Option 2</fast-option>
+              <fast-option>Option 3</fast-option>
+            </fast-select>
+          `;
+        });
+
+        // Open the select
+        await element.evaluate((node: FASTSelect) => {
+            node.open = true;
+        });
+
+        await element.evaluate((node: FASTSelect) => {
+            const event = new KeyboardEvent("keydown", { key: "Enter" });
+            node.dispatchEvent(event);
+        });
+
+        await expect(element).toHaveJSProperty("selectedIndex", 0);
+    });
+
+    test("pressing Escape key while open should close the dropdown", async () => {
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+            <fast-select open>
+              <fast-option>Option 1</fast-option>
+              <fast-option>Option 2</fast-option>
+              <fast-option>Option 3</fast-option>
+            </fast-select>
+          `;
+        });
+
+        await element.evaluate((node: FASTSelect) => {
+            const event = new KeyboardEvent("keydown", { key: "Escape" });
+            node.dispatchEvent(event);
+        });
+
+        await expect(element).not.toHaveBooleanAttribute("open");
+    });
+
     ["input", "change"].forEach(eventName => {
         [
             { expectedValue: "Option 2", key: "ArrowDown" },
@@ -513,4 +575,81 @@ test.describe("Select", () => {
 
         await expect(element).toHaveJSProperty("displayValue", "textContent value");
     });
+
+    test("should set the displayValue to the selected options separated by commas when the multiple attribute is present", async () => {
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+            <fast-select multiple>
+              <fast-option selected>Option 1</fast-option>
+              <fast-option selected>Option 2</fast-option>
+              <fast-option>Option 3</fast-option>
+            </fast-select>
+          `;
+        });
+
+        await expect(element).toHaveJSProperty("displayValue", "Option 1, Option 2");
+    });
+
+    test("should not close on click when the multiple attribute is present", async () => {
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+            <fast-select multiple>
+              <fast-option>Option 1</fast-option>
+              <fast-option>Option 2</fast-option>
+              <fast-option>Option 3</fast-option>
+            </fast-select>
+          `;
+        });
+
+        const listbox = element.locator(".listbox");
+
+        // Open the select
+        await element.evaluate((node: FASTSelect) => {
+            node.open = true;
+        });
+
+        // Simulate a click on the select
+        await element.click();
+
+        await expect(element).toHaveBooleanAttribute("open");
+        await expect(listbox).toBeVisible();
+    });
+
+    test("when listbox-mode attribute is present, the select renders the listbox only without control", async () => {
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+            <fast-select listbox-mode>
+              <fast-option>Option 1</fast-option>
+              <fast-option>Option 2</fast-option>
+              <fast-option>Option 3</fast-option>
+            </fast-select>
+          `;
+        });
+
+        const listbox = element.locator(".listbox");
+        const control = element.locator(".control");
+
+        await expect(listbox).toBeVisible();
+        await expect(control).not.toBeVisible();
+    });
+
+    test("should display the placeholder when no option is selected", async () => {
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+            <fast-select placeholder="Select an option">
+              <fast-option value="1">Option 1</fast-option>
+              <fast-option value="2">Option 2</fast-option>
+              <fast-option value="3">Option 3</fast-option>
+            </fast-select>
+          `;
+        });
+
+        await expect(element).toHaveJSProperty("displayValue", "Select an option");
+
+        await element.evaluate<void, FASTSelect>(node => {
+            node.value = "2";
+        });
+
+        await expect(element).toHaveJSProperty("displayValue", "Option 2");
+    });
 });

packages/web-components/fast-foundation/src/select/select.template.ts

@@ -19,6 +19,7 @@ export function selectTemplate<T extends FASTSelect>(
             aria-expanded="${x => x.ariaExpanded}"
             aria-haspopup="${x => (x.collapsible ? "listbox" : null)}"
             aria-multiselectable="${x => x.ariaMultiSelectable}"
+            ?listbox-mode="${x => x.listboxMode}"
             ?open="${x => x.open}"
             role="combobox"
             tabindex="${x => (!x.disabled ? "0" : null)}"
@@ -29,7 +30,7 @@ export function selectTemplate<T extends FASTSelect>(
             @mousedown="${(x, c) => x.mousedownHandler(c.event as MouseEvent)}"
         >
             ${when(
-                x => x.collapsible,
+                x => !x.listboxMode && x.collapsible,
                 html<T>`
                     <div
                         class="control"
@@ -58,9 +59,18 @@ export function selectTemplate<T extends FASTSelect>(
                 part="listbox"
                 role="listbox"
                 ?disabled="${x => x.disabled}"
-                ?hidden="${x => (x.collapsible ? !x.open : false)}"
+                ?hidden="${x =>
+                    !x.listboxMode ? (x.collapsible ? !x.open : false) : false}"
                 ${ref("listbox")}
             >
+                ${when(
+                    x => x.placeholder,
+                    html<T>`
+                        <option disabled hidden ${ref("placeholderOption")}>
+                            ${x => x.placeholder}
+                        </option>
+                    `
+                )}
                 <slot
                     ${slotted({
                         filter: FASTListbox.slottedOptionFilter,