fix: add method to clear selected channel in mgt-teams-channel-picker (…

…#2865) adds method to clear selected item from teams channel picker elements adds a story using selectionChanged event to show how clearSelectedItem can be uses
microsoftgraph · Nov 20, 2023 · c3a3d82 · c3a3d82
1 parent 4769ef7
commit c3a3d82
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 2 deletions.
diff --git a/packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.ts b/packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.ts
@@ -757,13 +757,22 @@ export class MgtTeamsChannelPicker extends MgtTemplatedComponent {
     this.resetFocusState();
   }
 
+  /**
+   * Clears the selectedItem state.
+   *
+   * @memberof MgtTeamsChannelPicker
+   */
+  clearSelectedItem() {
+    this.removeSelectedChannel();
+  }
+
   /**
    * Handles operations that are performed on the DOM when you remove a
    * channel. For example on clicking the X button.
    *
    * @param item a selected channel item
    */
-  private removeSelectedChannel(item: ChannelPickerItemState) {
+  private removeSelectedChannel(item?: ChannelPickerItemState) {
     this.selectChannel(item);
     const treeItems = this.renderRoot.querySelectorAll('fluent-tree-item');
     if (treeItems) {
@@ -961,7 +970,7 @@ export class MgtTeamsChannelPicker extends MgtTemplatedComponent {
     this.gainedFocus();
   };
 
-  private selectChannel(item: ChannelPickerItemState) {
+  private selectChannel(item?: ChannelPickerItemState) {
     if (item && this._selectedItemState !== item) {
       this._input.setAttribute('disabled', 'true');
     } else {

diff --git a/stories/components/teamsChannelPicker/teamsChannelPicker.stories.js b/stories/components/teamsChannelPicker/teamsChannelPicker.stories.js
@@ -84,6 +84,32 @@ export const selectChannel = () => html`
   </script>
 `;
 
+export const clearSelectedItem = () => html`
+  <mgt-teams-channel-picker></mgt-teams-channel-picker>
+  <button class="clear">Clear SelectedChannel</button>
+
+  <div class="output"></div>
+
+  <script>
+    const picker = document.querySelector('mgt-teams-channel-picker');
+    const output = document.querySelector('.output');
+    const clear = document.querySelector('.clear');
+
+    clear.addEventListener('click', _ => {
+      picker.clearSelectedItem();
+    });
+
+    picker.addEventListener('selectionChanged', e => {
+      if (e.detail) {
+        output.innerHTML = '<b>channel:</b> ' + e.detail.channel.displayName;
+        output.innerHTML += '<br/><b>team:</b> ' + e.detail.team.displayName;
+      } else {
+        output.innerText = 'no channel selected';
+      }
+    })
+  </script>
+`;
+
 export const RTL = () => html`
   <body dir="rtl">
     <mgt-teams-channel-picker></mgt-teams-channel-picker>