From 6e86fb4eab38512ae4059ad62754ce91fed541da Mon Sep 17 00:00:00 2001
From: gerjanvangeest <gerjanvangeest@users.noreply.github.com>
Date: Tue, 21 Sep 2021 17:29:52 +0200
Subject: [PATCH] fix(overlays): hide local overlay on ESC (#1500)

* fix(overlays): hide local overlay on ESC
---
 .changeset/early-badgers-smell.md             |  5 ++++
 docs/docs/systems/overlays/configuration.md   | 24 +++++++++++++++++++
 .../src/configurations/withDropdownConfig.js  |  2 ++
 3 files changed, 31 insertions(+)
 create mode 100644 .changeset/early-badgers-smell.md

diff --git a/.changeset/early-badgers-smell.md b/.changeset/early-badgers-smell.md
new file mode 100644
index 000000000..052f7475e
--- /dev/null
+++ b/.changeset/early-badgers-smell.md
@@ -0,0 +1,5 @@
+---
+'@lion/overlays': minor
+---
+
+Hide local overlays on ESC
diff --git a/docs/docs/systems/overlays/configuration.md b/docs/docs/systems/overlays/configuration.md
index c661df5ba..474b60017 100644
--- a/docs/docs/systems/overlays/configuration.md
+++ b/docs/docs/systems/overlays/configuration.md
@@ -156,6 +156,30 @@ export const hidesOnEsc = () => {
 };
 ```
 
+## hidesOnOutsideEsc
+
+Boolean property. When enabled allows closing the overlay on ESC key, even when contentNode has no focus.
+
+```js preview-story
+export const hidesOnOutsideEsc = () => {
+  const hidesOnEscConfig = { hidesOnOutsideEsc: true };
+  return html`
+    <demo-overlay-system .config=${hidesOnEscConfig}>
+      <button slot="invoker">Click me to open the overlay!</button>
+      <div slot="content" class="demo-overlay">
+        Hello! You can close this notification here:
+        <button
+          class="close-button"
+          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+        >
+          ⨯
+        </button>
+      </div>
+    </demo-overlay-system>
+  `;
+};
+```
+
 ## hidesOnOutsideClick
 
 Boolean property. Will allow closing the overlay by clicking outside the `contentNode`.
diff --git a/packages/overlays/src/configurations/withDropdownConfig.js b/packages/overlays/src/configurations/withDropdownConfig.js
index 327dbe8e8..7f6ade081 100644
--- a/packages/overlays/src/configurations/withDropdownConfig.js
+++ b/packages/overlays/src/configurations/withDropdownConfig.js
@@ -7,6 +7,8 @@ export const withDropdownConfig = () =>
     placementMode: 'local',
     inheritsReferenceWidth: 'min',
     hidesOnOutsideClick: true,
+    hidesOnOutsideEsc: true,
+    hidesOnEsc: true,
     popperConfig: {
       placement: 'bottom-start',
       modifiers: [