fix(dropdown): event propagation (microsoft#14184)

#### Pull request checklist

- [ ] Addresses an existing issue: Fixes #0000
- [ ] Include a change request file using `$ yarn change`

#### Description of changes

`Dropdown` should only prevents propagation of `ESC` keydown if the list is open, otherwise propagation should still happen. 

#### Focus areas to test

(optional)

packages/fluentui/CHANGELOG.md

@@ -21,6 +21,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Restricted prop sets in the `Grid` component which are passed to styles functions @layershifter ([#13863](https://github.com/microsoft/fluentui/pull/13863))
 - Restricted prop sets in the `Dropdown` component which are passed to styles functions @layershifter ([#13962](https://github.com/microsoft/fluentui/pull/13962))
 - `UIComponent` and `AutoControlledComponent` are removed @layershifter ([#13962](https://github.com/microsoft/fluentui/pull/13962))
+- Set `Dropdown` to only stop `ESC` keydown propagation if `Dropdown` is open @assuncaocharles ([#14184](https://github.com/microsoft/fluentui/pull/14184))
 
 ### Fixes
 - Fix `Tooltip` layouting when it is closed @fealkhou ([#13237](https://github.com/microsoft/fluentui/pull/13237))

packages/fluentui/e2e/tests/dialogWithDropdown-test.ts

@@ -5,6 +5,7 @@ const outerTrigger = `#${selectors.outerTrigger}`;
 const dropdownSelector = `#${selectors.dropdown}`;
 const dialogHeader = `#${selectors.dialogHeader}`;
 const dropdownIndicator = `.${dropdownSlotClassNames.toggleIndicator}`;
+const dropdownList = `.${dropdownSlotClassNames.itemsList}`;
 
 describe('Dialog scroll', () => {
   beforeEach(async () => {
@@ -32,4 +33,14 @@ describe('Dialog scroll', () => {
     await e2e.pressKey('Escape');
     expect(await e2e.exists(dropdownSelector)).toBe(false);
   });
+
+  it('should close when ESC pressed in the closed dropdown', async () => {
+    await e2e.clickOn(outerTrigger); // open dialog
+    await e2e.focusOn(dropdownSelector);
+    await e2e.pressKey('ArrowDown'); // open list
+    expect(await e2e.exists(dropdownList)).toBe(true);
+    await e2e.pressKey('Escape'); // closes list
+    await e2e.pressKey('Escape'); // closes dialog
+    expect(await e2e.exists(dropdownSelector)).toBe(false);
+  });
 });

packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx

@@ -1035,7 +1035,11 @@ export const Dropdown: ComponentWithAs<'div', DropdownProps> &
             tryRemoveItemFromValue();
             break;
           case keyboardKey.Escape:
-            e.stopPropagation();
+            // If dropdown list is open ESC should close it and not propagate to the parent
+            // otherwise event should propagate
+            if (open) {
+              e.stopPropagation();
+            }
           default:
             break;
         }