Callwithchat mobile: dismissed drawer after device selection (#2115)

* fix drawer bug'

* Change files

* update ui test

* update ui test

* update pr

Author: carocao-msft

change/@internal-react-composites-ce917fbc-6199-4733-9870-d62cf81ffa5e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fixed bug where drawer on mobile does not get dismissed after making a selection",
+  "packageName": "@internal/react-composites",
+  "email": "carolinecao@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-composites/src/composites/CallWithChatComposite/components/MoreDrawer.tsx

@@ -98,7 +98,7 @@ const inferCallWithChatControlOptions = (
 export const MoreDrawer = (props: MoreDrawerProps): JSX.Element => {
   const drawerMenuItems: DrawerMenuItemProps[] = [];
 
-  const { speakers, onSelectSpeaker } = props;
+  const { speakers, onSelectSpeaker, onLightDismiss } = props;
   const onSpeakerItemClick = useCallback(
     (_ev, itemKey) => {
       const selected = speakers?.find((speaker) => speaker.id === itemKey);
@@ -107,8 +107,9 @@ export const MoreDrawer = (props: MoreDrawerProps): JSX.Element => {
         // But this is a known issue in our state.
         onSelectSpeaker(selected as AudioDeviceInfo);
       }
+      onLightDismiss();
     },
-    [speakers, onSelectSpeaker]
+    [speakers, onSelectSpeaker, onLightDismiss]
   );
 
   const drawerSelectionOptions = inferCallWithChatControlOptions(props.callControls);
@@ -142,8 +143,9 @@ export const MoreDrawer = (props: MoreDrawerProps): JSX.Element => {
         // But this is a known issue in our state.
         onSelectMicrophone(selected as AudioDeviceInfo);
       }
+      onLightDismiss();
     },
-    [microphones, onSelectMicrophone]
+    [microphones, onSelectMicrophone, onLightDismiss]
   );
 
   if (props.microphones && props.microphones.length > 0) {

packages/react-composites/tests/browser/callwithchat/CallWithChatComposite.test.ts

@@ -160,6 +160,11 @@ test.describe('CallWithChat Composite CallWithChat Page Tests', () => {
       await moreDrawerSpeakerDiv?.click();
       const submenuNewAudioDeviceDiv = await page.$('div[role="menu"] >> text="Fake Audio Output 1"');
       await submenuNewAudioDeviceDiv?.click();
+      //need to open again because submenu is dismissed automatically after selection
+      await pageClick(page, dataUiId('call-with-chat-composite-more-button'));
+      const moreDrawerSpeakerDiv_copy = await page.$('div[role="menu"] >> text=Speaker');
+      await moreDrawerSpeakerDiv_copy?.click();
+      await page.$('div[role="menu"] >> text="Fake Audio Output 1"');
       expect(await stableScreenshot(page)).toMatchSnapshot(`call-with-chat-more-drawer-submenu-speaker-select.png`);
     }
   });
@@ -177,7 +182,6 @@ test.describe('CallWithChat Composite CallWithChat Page Tests', () => {
       await submenuNewAudioDeviceDiv?.click();
 
       // Display MoreDrawer to view newly selected audio device
-      await page.mouse.click(100, 100);
       await pageClick(page, dataUiId('call-with-chat-composite-more-button'));
       expect(await stableScreenshot(page)).toMatchSnapshot(
         `call-with-chat-more-drawer-new-selected-speaker-screen.png`
@@ -203,6 +207,12 @@ test.describe('CallWithChat Composite CallWithChat Page Tests', () => {
       await moreDrawerMicrophoneDiv?.click();
       const submenuNewAudioDeviceDiv = await page.$('div[role="menu"] >> text="Fake Audio Input 1"');
       await submenuNewAudioDeviceDiv?.click();
+
+      //need to open again because submenu is dismissed automatically after selection
+      await pageClick(page, dataUiId('call-with-chat-composite-more-button'));
+      const moreDrawerMicrophoneDiv_copy = await page.$('div[role="menu"] >> text=Microphone');
+      await moreDrawerMicrophoneDiv_copy?.click();
+      await page.$('div[role="menu"] >> text="Fake Audio Input 1"');
       expect(await stableScreenshot(page)).toMatchSnapshot(`call-with-chat-more-drawer-submenu-microphone-select.png`);
     }
   });
@@ -220,7 +230,6 @@ test.describe('CallWithChat Composite CallWithChat Page Tests', () => {
       await submenuNewAudioDeviceDiv?.click();
 
       // Display MoreDrawer to view newly selected audio device
-      await page.mouse.click(100, 100);
       await pageClick(page, dataUiId('call-with-chat-composite-more-button'));
       expect(await stableScreenshot(page)).toMatchSnapshot(
         `call-with-chat-more-drawer-new-selected-microphone-screen.png`