fix(select): update select docs and fix initial selection

PiperOrigin-RevId: 567884899
material-components · Sep 23, 2023 · 5e4434b · 5e4434b
1 parent 205bdc6
commit 5e4434b
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 38 deletions.
diff --git a/docs/components/figures/select/theming-filled.html b/docs/components/figures/select/theming-filled.html
@@ -8,18 +8,21 @@
       .styled-example.filled {
         --md-filled-select-text-field-container-shape: 0px;
         --md-filled-select-text-field-container-color: #f7faf9;
-        --md-filled-field-content-color: #005353;
-        --md-filled-field-content-font: system-ui;
+        --md-filled-select-text-field-input-text-color: #005353;
+        --md-filled-select-text-field-input-text-font: system-ui;
       }
       .styled-example.filled md-filled-select::part(menu) {
         --md-menu-container-color: #f4fbfa;
         --md-menu-container-shape: 0px;
-        --md-menu-item-container-color: transparent;
       }
     </style>
     <md-filled-select>
-      <md-select-option selected value="apple" headline="Apple"></md-select-option>
-      <md-select-option value="tomato" headline="Tomato"></md-select-option>
+      <md-select-option selected value="apple">
+        <div slot="headline">Apple</div>
+      </md-select-option>
+      <md-select-option value="tomato">
+        <div slot="headline">Tomato</div>
+      </md-select-option>
     </md-filled-select>
   </figure>
 </div>
diff --git a/docs/components/figures/select/theming-outlined.html b/docs/components/figures/select/theming-outlined.html
@@ -5,6 +5,9 @@
     aria-label="Image of an outlined select with a different theme applied"
   >
     <style>
+      .styled-example {
+        background-color: #f4fbfa;
+      }
       .styled-example.outlined {
         --md-outlined-select-text-field-outline-color: #6e7979;
         --md-outlined-select-text-field-container-shape: 0px;
@@ -14,13 +17,16 @@
       .styled-example.outlined md-outlined-select::part(menu) {
         --md-menu-container-color: #f4fbfa;
         --md-menu-container-shape: 0px;
-        --md-menu-item-container-color: transparent;
       }
     </style>
 
     <md-outlined-select>
-      <md-select-option selected value="apple" headline="Apple"></md-select-option>
-      <md-select-option value="tomato" headline="Tomato"></md-select-option>
+      <md-select-option selected value="apple">
+        <div slot="headline">Apple</div>
+      </md-select-option>
+      <md-select-option value="tomato">
+        <div slot="headline">Tomato</div>
+      </md-select-option>
     </md-outlined-select>
   </figure>
 </div>
diff --git a/docs/components/figures/select/usage.html b/docs/components/figures/select/usage.html
@@ -13,15 +13,23 @@
     aria-label="An outlined dropdown menu filled with Apple, and a filled dropdown menu."
   >
     <md-outlined-select>
-      <md-select-option headline=""></md-select-option>
-      <md-select-option selected value="apple" headline="Apple"></md-select-option>
-      <md-select-option value="apricot" headline="Apricot"></md-select-option>
+      <md-select-option aria-label="blank"></md-select-option>
+      <md-select-option selected value="apple">
+        <div slot="headline">Apple</div>
+      </md-select-option>
+      <md-select-option value="apricot">
+        <div slot="headline">Apricot</div>
+      </md-select-option>
     </md-outlined-select>
 
     <md-filled-select>
-      <md-select-option headline=""></md-select-option>
-      <md-select-option value="apple" headline="Apple"></md-select-option>
-      <md-select-option value="apricot" headline="Apricot"></md-select-option>
+      <md-select-option aria-label="blank"></md-select-option>
+      <md-select-option value="apple">
+        <div slot="headline">Apple</div>
+      </md-select-option>
+      <md-select-option value="apricot">
+        <div slot="headline">Apricot</div>
+      </md-select-option>
     </md-filled-select>
   </figure>
 </div>
diff --git a/docs/components/select.md b/docs/components/select.md
@@ -57,15 +57,23 @@ fixed list of available options. It is analogous to the native HTML
 
 ```html
 <md-outlined-select>
-  <md-select-option headline=""></md-select-option>
-  <md-select-option selected value="apple" headline="Apple"></md-select-option>
-  <md-select-option value="apricot" headline="Apricot"></md-select-option>
+  <md-select-option aria-label="blank"></md-select-option>
+  <md-select-option selected value="apple">
+    <div slot="headline">Apple</div>
+  </md-select-option>
+  <md-select-option value="apricot">
+    <div slot="headline">Apricot</div>
+  </md-select-option>
 </md-outlined-select>
 
 <md-filled-select>
-  <md-select-option headline=""></md-select-option>
-  <md-select-option value="apple" headline="Apple"></md-select-option>
-  <md-select-option value="apricot" headline="Apricot"></md-select-option>
+  <md-select-option aria-label="blank"></md-select-option>
+  <md-select-option value="apple">
+    <div slot="headline">Apple</div>
+  </md-select-option>
+  <md-select-option value="apricot">
+    <div slot="headline">Apricot</div>
+  </md-select-option>
 </md-filled-select>
 ```
 
@@ -75,8 +83,12 @@ Indicate that a selection is mandatory by adding the `required` attribute.
 
 ```html
 <md-filled-select required>
-  <md-select-option value="one" headline="One"></md-select-option>
-  <md-select-option value="two" headline="Two"></md-select-option>
+  <md-select-option value="one">
+    <div slot="headline">One</div>
+  </md-select-option>
+  <md-select-option value="two">
+    <div slot="headline">Two</div>
+  </md-select-option>
 </md-filled-select>
 ```
 
@@ -101,12 +113,12 @@ and can be customized in terms of color, typography, and shape.
 
 ### Filled Select tokens
 
-Token                                           | Default value
------------------------------------------------ | -------------
-`--md-filled-select-text-field-container-color` | `--md-sys-color-surface-container-highest`
-`--md-filled-select-text-field-container-shape` | `4px`
-`--md-filled-field-content-color`               | `--md-sys-color-on-surface`
-`--md-filled-field-content-font`                | `--md-sys-typescale-body-large-font`
+Token                                            | Default value
+------------------------------------------------ | -------------
+`--md-filled-select-text-field-container-color`  | `--md-sys-color-surface-container-highest`
+`--md-filled-select-text-field-container-shape`  | `4px`
+`--md-filled-select-text-field-input-text-color` | `--md-sys-color-on-surface`
+`--md-filled-select-text-field-input-text-font`  | `--md-sys-typescale-body-large-font`
 
 *   [Filled Select tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-select.scss)
     <!-- {.external} -->
@@ -128,20 +140,23 @@ To theme the select's dropdown menu, use the `md-menu` component tokens on the
 :root {
   --md-filled-select-text-field-container-shape: 0px;
   --md-filled-select-text-field-container-color: #f7faf9;
-  --md-filled-field-content-color: #005353;
-  --md-filled-field-content-font: system-ui;
+  --md-filled-select-text-field-input-text-color: #005353;
+  --md-filled-select-text-field-input-text-font: system-ui;
 }
 
 md-filled-select::part(menu) {
   --md-menu-container-color: #f4fbfa;
   --md-menu-container-shape: 0px;
-  --md-menu-item-container-color: transparent;
 }
 </style>
 
 <md-filled-select>
-  <md-select-option selected value="apple" headline="Apple"></md-select-option>
-  <md-select-option value="tomato" headline="Tomato"></md-select-option>
+  <md-select-option selected value="apple">
+    <div slot="headline">Apple</div>
+  </md-select-option>
+  <md-select-option value="tomato">
+    <div slot="headline">Tomato</div>
+  </md-select-option>
 </md-filled-select>
 ```
 
@@ -178,13 +193,16 @@ Token                                              | Default value
 md-outlined-select::part(menu) {
   --md-menu-container-color: #f4fbfa;
   --md-menu-container-shape: 0px;
-  --md-menu-item-container-color: transparent;
 }
 </style>
 
 <md-outlined-select>
-  <md-select-option selected value="apple" headline="Apple"></md-select-option>
-  <md-select-option value="tomato" headline="Tomato"></md-select-option>
+  <md-select-option selected value="apple">
+    <div slot="headline">Apple</div>
+  </md-select-option>
+  <md-select-option value="tomato">
+    <div slot="headline">Tomato</div>
+  </md-select-option>
 </md-outlined-select>
 ```
 

diff --git a/menu/internal/menuitem/menu-item.ts b/menu/internal/menuitem/menu-item.ts
@@ -75,6 +75,7 @@ export class MenuItemEl extends LitElement implements MenuItem {
     return this.menuItemController.typeaheadText;
   }
 
+  @property({attribute: 'typeahead-text'})
   set typeaheadText(text: string) {
     this.menuItemController.setTypeaheadText(text);
   }

diff --git a/select/internal/select.ts b/select/internal/select.ts
@@ -6,7 +6,7 @@
 
 import '../../menu/menu.js';
 
-import {html, LitElement, nothing, PropertyValues} from 'lit';
+import {html, isServer, LitElement, nothing, PropertyValues} from 'lit';
 import {property, query, queryAssignedElements, state} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {html as staticHtml, StaticValue} from 'lit/static-html.js';
@@ -113,6 +113,7 @@ export abstract class Select extends LitElement {
   }
 
   set value(value: string) {
+    if (isServer) return;
     this.lastUserSetValue = value;
     this.select(value);
   }
@@ -393,6 +394,15 @@ export abstract class Select extends LitElement {
       this.initUserSelection();
     }
 
+    // Case for when the DOM is streaming, there are no children, and a child
+    // has [selected] set on it, we need to wait for DOM to render something.
+    if (!this.lastSelectedOptionRecords.length && !isServer &&
+        !this.options.length) {
+      setTimeout(() => {
+        this.updateValueAndDisplayText();
+      });
+    }
+
     super.firstUpdated(changed);
   }
 

diff --git a/select/internal/selectoption/select-option.ts b/select/internal/selectoption/select-option.ts
@@ -70,6 +70,7 @@ export class SelectOptionEl extends LitElement implements SelectOption {
     return this.selectOptionController.typeaheadText;
   }
 
+  @property({attribute: 'typeahead-text'})
   set typeaheadText(text: string) {
     this.selectOptionController.setTypeaheadText(text);
   }
@@ -82,6 +83,7 @@ export class SelectOptionEl extends LitElement implements SelectOption {
     return this.selectOptionController.displayText;
   }
 
+  @property({attribute: 'display-text'})
   set displayText(text: string) {
     this.selectOptionController.setDisplayText(text);
   }

diff --git a/select/internal/selectoption/selectOptionController.ts b/select/internal/selectoption/selectOptionController.ts
@@ -71,7 +71,7 @@ export class SelectOptionController implements ReactiveController {
       SelectOptionConfig['getHeadlineElements'];
   private internalDisplayText: string|null = null;
   private lastSelected = this.host.selected;
-  private firstUpdate = false;
+  private firstUpdate = true;
 
   /**
    * The recommended role of the select option.