feat: mgt-picker selected-value attribute (#2363)

allows for setting the selected value of the picker for scenarios where the application wants to control the selected item

Author: gavinbarron

packages/mgt-components/src/components/mgt-picker/mgt-picker.ts

@@ -7,6 +7,7 @@
 
 import { html, TemplateResult } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { MgtTemplatedComponent, mgtHtml, customElement } from '@microsoft/mgt-element';
 import { strings } from './strings';
 import { fluentCombobox, fluentOption } from '@fluentui/web-components';
@@ -146,6 +147,19 @@ export class MgtPicker extends MgtTemplatedComponent {
   })
   public cacheInvalidationPeriod = 0;
 
+  /**
+   * Sets the currently selected value for the picker
+   * Must be present as an option in the supplied data returned from the the underlying graph query
+   *
+   * @type {string}
+   * @memberof MgtPicker
+   */
+  @property({
+    attribute: 'selected-value',
+    type: String
+  })
+  public selectedValue: string;
+
   private isRefreshing: boolean;
 
   @state() private response: Entity[];
@@ -212,7 +226,9 @@ export class MgtPicker extends MgtTemplatedComponent {
    */
   protected renderPicker(): TemplateResult {
     return mgtHtml`
-      <fluent-combobox part="picker" class="picker" id="combobox" autocomplete="list" placeholder=${this.placeholder}>
+      <fluent-combobox current-value=${ifDefined(
+        this.selectedValue
+      )} part="picker" class="picker" id="combobox" autocomplete="list" placeholder=${this.placeholder}>
         ${this.response.map(
           item => html`
           <fluent-option value=${item.id} @click=${(e: MouseEvent) => this.handleClick(e, item)}> ${

packages/mgt-react/src/generated/react.ts

@@ -201,6 +201,7 @@ export type PickerProps = {
 	scopes?: string[];
 	cacheEnabled?: boolean;
 	cacheInvalidationPeriod?: number;
+	selectedValue?: string;
 	templateContext?: TemplateContext;
 	mediaQuery?: ComponentMediaQuery;
 	selectionChanged?: (e: CustomEvent<any>) => void;

stories/components/picker/picker.js

@@ -32,6 +32,9 @@ export const MaxPages = () => html`
   <mgt-picker resource="me/messages" scopes="mail.read" placeholder="Select a message" key-name="subject" max-pages="2"></mgt-picker>
 `;
 
+export const SelectedValue = () => html`
+  <mgt-picker resource="/groups" selected-value="Activewear" scopes="group.read.all" key-name="displayName"></mgt-picker>
+`;
 export const CacheEnabled = () => html`
   <mgt-picker resource="/groups" placeholder="Select a group" scopes="group.read.all" key-name="displayName" cache-enabled="true" cache-invalidation-period="50000"></mgt-picker>
 `;