use selectionChanged event in clear Selected Channel story

microsoftgraph · Nov 20, 2023 · d40e673 · d40e673
1 parent 6d437b3
commit d40e673
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 21 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
@@ -763,8 +763,7 @@ export class MgtTeamsChannelPicker extends MgtTemplatedComponent {
    * @memberof MgtTeamsChannelPicker
    */
   clearSelectedItem() {
-    this.removeSelectedChannel(undefined);
-    this.fireCustomEvent('selectionChanged', this.selectedItem);
+    this.removeSelectedChannel();
   }
 
   /**
@@ -773,7 +772,7 @@ export class MgtTeamsChannelPicker extends MgtTemplatedComponent {
    *
    * @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) {
@@ -971,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
@@ -86,33 +86,27 @@ export const selectChannel = () => html`
 
 export const clearSelectedItem = () => html`
   <mgt-teams-channel-picker></mgt-teams-channel-picker>
-
-  <button class="get">Get SelectedChannel</button>
   <button class="clear">Clear SelectedChannel</button>
 
   <div class="output"></div>
 
   <script>
-    document.querySelector('.get').addEventListener('click', _ => {
-      const picker = document.querySelector('mgt-teams-channel-picker');
-      const output = document.querySelector('.output');
+    const picker = document.querySelector('mgt-teams-channel-picker');
+    const output = document.querySelector('.output');
+    const clear = document.querySelector('.clear');
 
-      if (picker.selectedItem) {
-        output.innerHTML = '<b>channel:</b> ' + picker.selectedItem.channel.displayName;
-        output.innerHTML += '<br/><b>team:</b> ' + picker.selectedItem.team.displayName;
-      } else {
-        output.innerText = 'no channel selected';
-      }
+    clear.addEventListener('click', _ => {
+      picker.clearSelectedItem();
     });
 
-    document.querySelector('.clear').addEventListener('click', _ => {
-      const picker = document.querySelector('mgt-teams-channel-picker');
-      const output = document.querySelector('.output');
-      if (picker.selectedItem) {
-        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>
 `;