diff --git a/pages/modal/with-dropdowns.page.tsx b/pages/modal/with-dropdowns.page.tsx
new file mode 100644
index 0000000000..833b601824
--- /dev/null
+++ b/pages/modal/with-dropdowns.page.tsx
@@ -0,0 +1,186 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+import {
+  Modal,
+  Button,
+  SpaceBetween,
+  Autosuggest,
+  ButtonDropdown,
+  DatePicker,
+  DateRangePicker,
+  DateRangePickerProps,
+  Multiselect,
+  MultiselectProps,
+  Popover,
+} from '~components';
+
+export default function () {
+  const [visible, setVisible] = useState(false);
+  const [value, setValue] = useState('');
+  const [dateRangeValue, setDateRangeValue] = useState<DateRangePickerProps['value']>(null);
+  const [selectedOptions, setSelectedOptions] = useState<MultiselectProps['selectedOptions']>([
+    {
+      label: 'Option 1',
+      value: '1',
+      description: 'This is a description',
+    },
+  ]);
+
+  return (
+    <article>
+      <h1>Simple modal</h1>
+      <Button onClick={() => setVisible(true)}>Show modal</Button>
+      <Modal
+        header="Delete instance"
+        visible={visible}
+        onDismiss={() => setVisible(false)}
+        closeAriaLabel="Close modal"
+        footer={
+          <span style={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <Button variant="link">Cancel</Button>
+            <Button variant="primary">Delete</Button>
+          </span>
+        }
+      >
+        <SpaceBetween size={'xs'}>
+          <Autosuggest
+            onChange={({ detail }) => setValue(detail.value)}
+            value={value}
+            options={[
+              { value: 'Suggestion 1' },
+              { value: 'Suggestion 2' },
+              { value: 'Suggestion 3' },
+              { value: 'Suggestion 4' },
+            ]}
+            ariaLabel="Autosuggest example with suggestions"
+            placeholder="Enter value"
+            empty="No matches found"
+          />
+
+          <ButtonDropdown
+            items={[
+              { text: 'Delete', id: 'rm', disabled: false },
+              { text: 'Move', id: 'mv', disabled: false },
+              { text: 'Rename', id: 'rn', disabled: true },
+              {
+                id: 'view',
+                text: 'View metrics',
+                href: 'https://example.com',
+                external: true,
+                externalIconAriaLabel: '(opens in new tab)',
+              },
+            ]}
+          >
+            Short
+          </ButtonDropdown>
+
+          <DatePicker
+            onChange={({ detail }) => setValue(detail.value)}
+            value={value}
+            openCalendarAriaLabel={selectedDate =>
+              'Choose certificate expiry date' + (selectedDate ? `, selected date is ${selectedDate}` : '')
+            }
+            placeholder="YYYY/MM/DD"
+          />
+
+          <DateRangePicker
+            onChange={({ detail }) => setDateRangeValue(detail.value)}
+            value={dateRangeValue}
+            relativeOptions={[
+              {
+                key: 'previous-5-minutes',
+                amount: 5,
+                unit: 'minute',
+                type: 'relative',
+              },
+              {
+                key: 'previous-30-minutes',
+                amount: 30,
+                unit: 'minute',
+                type: 'relative',
+              },
+              {
+                key: 'previous-1-hour',
+                amount: 1,
+                unit: 'hour',
+                type: 'relative',
+              },
+              {
+                key: 'previous-6-hours',
+                amount: 6,
+                unit: 'hour',
+                type: 'relative',
+              },
+            ]}
+            isValidRange={range => {
+              if (range?.type === 'absolute') {
+                const [startDateWithoutTime] = range.startDate.split('T');
+                const [endDateWithoutTime] = range.endDate.split('T');
+                if (!startDateWithoutTime || !endDateWithoutTime) {
+                  return {
+                    valid: false,
+                    errorMessage:
+                      'The selected date range is incomplete. Select a start and end date for the date range.',
+                  };
+                }
+              }
+              return { valid: true };
+            }}
+            i18nStrings={{}}
+            placeholder="Filter by a date and time range"
+          />
+
+          <Multiselect
+            selectedOptions={selectedOptions}
+            onChange={({ detail }) => setSelectedOptions(detail.selectedOptions)}
+            options={[
+              {
+                label: 'Option 1',
+                value: '1',
+                description: 'This is a description',
+              },
+              {
+                label: 'Option 2',
+                value: '2',
+                iconName: 'unlocked',
+                labelTag: 'This is a label tag',
+              },
+              {
+                label: 'Option 3 (disabled)',
+                value: '3',
+                iconName: 'share',
+                tags: ['Tags go here', 'Tag1', 'Tag2'],
+                disabled: true,
+              },
+              {
+                label: 'Option 4',
+                value: '4',
+                filteringTags: ['filtering', 'tags', 'these are filtering tags'],
+              },
+              { label: 'Option 5', value: '5' },
+            ]}
+            placeholder="Choose options"
+          />
+
+          <Popover
+            header="Memory Error"
+            content="This instance contains insufficient memory. Stop the instance, choose a different instance type with more memory, and restart it."
+          >
+            Error
+          </Popover>
+
+          <Popover
+            dismissButton={false}
+            position="top"
+            size="small"
+            triggerType="custom"
+            content={'Code snippet copied'}
+          >
+            <Button iconName="copy">Copy</Button>
+          </Popover>
+        </SpaceBetween>
+      </Modal>
+    </article>
+  );
+}
diff --git a/src/button-dropdown/utils/use-button-dropdown.ts b/src/button-dropdown/utils/use-button-dropdown.ts
index b9f9af8d62..3b8ec0060c 100644
--- a/src/button-dropdown/utils/use-button-dropdown.ts
+++ b/src/button-dropdown/utils/use-button-dropdown.ts
@@ -161,6 +161,9 @@ export function useButtonDropdown({
         onReturnFocus();
         closeDropdown();
         event.preventDefault();
+        if (isOpen) {
+          event.stopPropagation();
+        }
         break;
       }
       case KeyCode.tab: {
diff --git a/src/date-picker/index.tsx b/src/date-picker/index.tsx
index 5d810363d8..2d07dfd398 100644
--- a/src/date-picker/index.tsx
+++ b/src/date-picker/index.tsx
@@ -89,6 +89,7 @@ const DatePicker = React.forwardRef(
 
     const onWrapperKeyDownHandler = (event: React.KeyboardEvent<HTMLDivElement>) => {
       if (event.keyCode === KeyCode.escape && isDropDownOpen) {
+        event.stopPropagation();
         buttonRef.current?.focus();
         setIsDropDownOpen(false);
       }
diff --git a/src/date-range-picker/index.tsx b/src/date-range-picker/index.tsx
index 77f00015ea..5ff12e1345 100644
--- a/src/date-range-picker/index.tsx
+++ b/src/date-range-picker/index.tsx
@@ -146,6 +146,9 @@ const DateRangePicker = React.forwardRef(
 
     const onWrapperKeyDownHandler = (event: React.KeyboardEvent<HTMLDivElement>) => {
       if (event.keyCode === KeyCode.escape) {
+        if (isDropDownOpen) {
+          event.stopPropagation();
+        }
         closeDropdown(true);
       }
     };
diff --git a/src/internal/components/autosuggest-input/index.tsx b/src/internal/components/autosuggest-input/index.tsx
index 8a4d1fcbe6..7b878ec79e 100644
--- a/src/internal/components/autosuggest-input/index.tsx
+++ b/src/internal/components/autosuggest-input/index.tsx
@@ -171,8 +171,10 @@ const AutosuggestInput = React.forwardRef(
         }
         case KeyCode.escape: {
           if (open) {
+            event.stopPropagation();
             closeDropdown();
           } else if (value) {
+            event.stopPropagation();
             fireNonCancelableEvent(onChange, { value: '' });
           }
           event.preventDefault();
diff --git a/src/internal/components/options-list/__tests__/use-keyboard.test.ts b/src/internal/components/options-list/__tests__/use-keyboard.test.ts
index b8f3ae36ef..541c24440f 100644
--- a/src/internal/components/options-list/__tests__/use-keyboard.test.ts
+++ b/src/internal/components/options-list/__tests__/use-keyboard.test.ts
@@ -22,7 +22,7 @@ const menuKeys: any = [
   ['enter', KeyCode.enter],
   ['space', KeyCode.space],
 ].reduce<any>((acc, [name, keyCode]) => {
-  acc[name] = { detail: { keyCode }, preventDefault: jest.fn() };
+  acc[name] = { detail: { keyCode }, preventDefault: jest.fn(), stopPropagation: jest.fn() };
   return acc;
 }, {});
 
diff --git a/src/internal/components/options-list/utils/use-keyboard.ts b/src/internal/components/options-list/utils/use-keyboard.ts
index aab2350d10..a387f697f0 100644
--- a/src/internal/components/options-list/utils/use-keyboard.ts
+++ b/src/internal/components/options-list/utils/use-keyboard.ts
@@ -44,6 +44,7 @@ export const useMenuKeyboard: UseMenuKeyboard = ({
           goEnd();
           break;
         case KeyCode.escape:
+          e.stopPropagation();
           closeDropdown();
           break;
         case KeyCode.enter:
diff --git a/src/modal/__tests__/modal.test.tsx b/src/modal/__tests__/modal.test.tsx
index ea99aa7453..a1046d0671 100644
--- a/src/modal/__tests__/modal.test.tsx
+++ b/src/modal/__tests__/modal.test.tsx
@@ -3,6 +3,14 @@
 import * as React from 'react';
 import { act, render, fireEvent } from '@testing-library/react';
 import Modal, { ModalProps } from '../../../lib/components/modal';
+import Select from '../../../lib/components/select';
+import Multiselect from '../../../lib/components/multiselect';
+import Autosuggest from '../../../lib/components/autosuggest';
+import DatePicker from '../../../lib/components/date-picker';
+import DateRangePicker from '../../../lib/components/date-range-picker';
+import ButtonDropdown from '../../../lib/components/button-dropdown';
+import Popover from '../../../lib/components/popover';
+import StatusIndicator from '../../../lib/components/status-indicator';
 import createWrapper, { ElementWrapper, ModalWrapper } from '../../../lib/components/test-utils/dom';
 
 import styles from '../../../lib/components/modal/styles.css.js';
@@ -184,6 +192,181 @@ describe('Modal component', () => {
 
       expect(onDismissSpy).toHaveBeenCalled();
     });
+
+    it('does not dismiss modal if ESC pressed with child select opened', () => {
+      const onDismissSpy = jest.fn();
+      const select = (
+        <Select
+          selectedOption={{
+            label: 'Option 1',
+            value: '1',
+          }}
+          onChange={() => {}}
+          options={[
+            { label: 'Option 1', value: '1' },
+            { label: 'Option 2', value: '2' },
+          ]}
+        />
+      );
+      const wrapper = renderModal({ visible: true, onDismiss: onDismissSpy, children: select });
+      const selectWrapper = wrapper.findContent().findSelect()!;
+
+      act(() => selectWrapper.findTrigger()!.keydown(KeyCode.space));
+
+      act(() => selectWrapper.findDropdown().findOptionByValue('1')!.keydown(KeyCode.escape));
+      expect(selectWrapper.findDropdown()!.findOpenDropdown()).toBeFalsy();
+      expect(onDismissSpy).not.toHaveBeenCalled();
+
+      act(() => wrapper.findContent()!.keydown(KeyCode.escape));
+      expect(onDismissSpy).toHaveBeenCalled();
+    });
+
+    it('does not dismiss modal if ESC pressed with child multiselect opened', () => {
+      const onDismissSpy = jest.fn();
+      const multiselect = (
+        <Multiselect
+          selectedOptions={[]}
+          onChange={() => {}}
+          options={[
+            { label: 'Option 1', value: '1' },
+            { label: 'Option 2', value: '2' },
+          ]}
+        />
+      );
+      const wrapper = renderModal({ visible: true, onDismiss: onDismissSpy, children: multiselect });
+      const multiselectWrapper = wrapper.findContent().findMultiselect()!;
+
+      act(() => multiselectWrapper.findTrigger()!.keydown(KeyCode.space));
+
+      act(() => multiselectWrapper.findDropdown().findOptionByValue('1')!.keydown(KeyCode.escape));
+      expect(multiselectWrapper.findDropdown()!.findOpenDropdown()).toBeFalsy();
+      expect(onDismissSpy).not.toHaveBeenCalled();
+
+      act(() => wrapper.findContent()!.keydown(KeyCode.escape));
+      expect(onDismissSpy).toHaveBeenCalled();
+    });
+
+    it('does not dismiss modal if ESC pressed with child autosuggest opened', () => {
+      const onDismissSpy = jest.fn();
+      const autosuggest = (
+        <Autosuggest
+          value={'opt'}
+          onChange={() => {}}
+          options={[
+            { label: 'Option 1', value: '1' },
+            { label: 'Option 2', value: '2' },
+          ]}
+        />
+      );
+      const wrapper = renderModal({ visible: true, onDismiss: onDismissSpy, children: autosuggest });
+      const autosuggestWrapper = wrapper.findContent().findAutosuggest()!;
+
+      act(() => autosuggestWrapper.focus());
+
+      act(() => autosuggestWrapper.findNativeInput().keydown(KeyCode.escape));
+      expect(autosuggestWrapper.findDropdown()!.findOpenDropdown()).toBeFalsy();
+      expect(onDismissSpy).not.toHaveBeenCalled();
+
+      act(() => wrapper.findContent()!.keydown(KeyCode.escape));
+      expect(onDismissSpy).toHaveBeenCalled();
+    });
+
+    it('does not dismiss modal if ESC pressed with child button dropdown opened', () => {
+      const onDismissSpy = jest.fn();
+      const buttonDropdown = (
+        <ButtonDropdown
+          items={[
+            { text: 'Delete', id: 'rm', disabled: false },
+            { text: 'Move', id: 'mv', disabled: false },
+          ]}
+        >
+          Short
+        </ButtonDropdown>
+      );
+      const wrapper = renderModal({ visible: true, onDismiss: onDismissSpy, children: buttonDropdown });
+      const btnDropdownWrapper = wrapper.findContent().findButtonDropdown()!;
+
+      act(() => btnDropdownWrapper.findNativeButton().keydown(KeyCode.enter));
+      expect(btnDropdownWrapper.findOpenDropdown()).toBeTruthy();
+
+      act(() => btnDropdownWrapper.findItemById('rm')!.keydown(KeyCode.escape));
+      expect(btnDropdownWrapper.findOpenDropdown()).toBeFalsy();
+      expect(onDismissSpy).not.toHaveBeenCalled();
+
+      act(() => wrapper.findContent()!.keydown(KeyCode.escape));
+      expect(onDismissSpy).toHaveBeenCalled();
+    });
+
+    it('does not dismiss modal if ESC pressed with child datepicker opened', () => {
+      const onDismissSpy = jest.fn();
+      const datePicker = <DatePicker onChange={() => {}} value={''} />;
+      const wrapper = renderModal({ visible: true, onDismiss: onDismissSpy, children: datePicker });
+      const datePickerWrapper = wrapper.findContent().findDatePicker()!;
+
+      fireEvent.click(datePickerWrapper.findOpenCalendarButton().getElement());
+
+      act(() => datePickerWrapper.findCalendar()!.keydown(KeyCode.escape));
+      expect(datePickerWrapper.findCalendar()).toBeFalsy();
+      expect(onDismissSpy).not.toHaveBeenCalled();
+
+      act(() => wrapper.findContent()!.keydown(KeyCode.escape));
+      expect(onDismissSpy).toHaveBeenCalled();
+    });
+
+    it('does not dismiss modal if ESC pressed with child date range picker opened', () => {
+      const onDismissSpy = jest.fn();
+      const dateRangePicker = (
+        <DateRangePicker
+          onChange={() => {}}
+          value={null}
+          isValidRange={() => {
+            return { valid: true };
+          }}
+          relativeOptions={[
+            {
+              key: 'previous-5-minutes',
+              amount: 5,
+              unit: 'minute',
+              type: 'relative',
+            },
+          ]}
+        />
+      );
+      const wrapper = renderModal({ visible: true, onDismiss: onDismissSpy, children: dateRangePicker });
+      const dateRangePickerWrapper = wrapper.findContent().findDateRangePicker()!;
+
+      dateRangePickerWrapper.openDropdown();
+
+      act(() => dateRangePickerWrapper.findDropdown()!.findCancelButton()!.keydown(KeyCode.escape));
+      expect(dateRangePickerWrapper.findDropdown()).toBeFalsy();
+      expect(onDismissSpy).not.toHaveBeenCalled();
+
+      act(() => wrapper.findContent()!.keydown(KeyCode.escape));
+      expect(onDismissSpy).toHaveBeenCalled();
+    });
+
+    it('does not dismiss modal if ESC pressed with child popover opened', () => {
+      const onDismissSpy = jest.fn();
+      const popover = (
+        <Popover
+          header="Memory Error"
+          content="This instance contains insufficient memory. Stop the instance, choose a different instance type with more memory, and restart it."
+        >
+          <StatusIndicator>Error</StatusIndicator>
+        </Popover>
+      );
+      const wrapper = renderModal({ visible: true, onDismiss: onDismissSpy, children: popover });
+      const popoverWrapper = wrapper.findContent().findPopover()!;
+
+      fireEvent.click(popoverWrapper.findTrigger().getElement());
+
+      act(() => popoverWrapper.findDismissButton()!.keydown(KeyCode.escape));
+      expect(popoverWrapper.findContent()).toBeFalsy();
+      expect(onDismissSpy).not.toHaveBeenCalled();
+
+      act(() => wrapper.findContent()!.keydown(KeyCode.escape));
+      expect(onDismissSpy).toHaveBeenCalled();
+    });
   });
 
   describe('Dismiss event', () => {
diff --git a/src/popover/body.tsx b/src/popover/body.tsx
index 254e6aeee7..2bcfd054ef 100644
--- a/src/popover/body.tsx
+++ b/src/popover/body.tsx
@@ -45,6 +45,7 @@ export default function PopoverBody({
   const onKeyDown = useCallback(
     (event: React.KeyboardEvent) => {
       if (event.keyCode === KeyCode.escape) {
+        event.stopPropagation();
         onDismiss();
       }
     },
diff --git a/src/popover/internal.tsx b/src/popover/internal.tsx
index eefae1ddd3..3b42ff0a94 100644
--- a/src/popover/internal.tsx
+++ b/src/popover/internal.tsx
@@ -82,11 +82,19 @@ function InternalPopover(
     focusTrigger();
   }, [focusTrigger]);
 
-  const onTriggerKeyDown = useCallback((event: React.KeyboardEvent) => {
-    if (event.keyCode === KeyCode.tab || event.keyCode === KeyCode.escape) {
-      setVisible(false);
-    }
-  }, []);
+  const onTriggerKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      const isEscapeKey = event.keyCode === KeyCode.escape;
+      const isTabKey = event.keyCode === KeyCode.tab;
+      if (isEscapeKey && visible) {
+        event.stopPropagation();
+      }
+      if (isTabKey || isEscapeKey) {
+        setVisible(false);
+      }
+    },
+    [visible]
+  );
 
   useImperativeHandle(ref, () => ({
     dismissPopover: onDismiss,