From 64aae41910ed9ecd30b1291068e6c2b4c1af9bbb Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 11 Sep 2020 10:55:24 -0400
Subject: [PATCH] Fixes #208

---
 CHANGELOG.md                         | 3 ++-
 src/components/dropdown/dropdown.tsx | 9 +++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e4becd502..0719b274c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,7 +3,8 @@
 ## Next
 
 - Added `input`, `label`, `prefix`, `clear-button`, `suffix`, `help-text` exported parts to `sl-select` to make the input customizable
-- Fixed bug where mouse events would bubble up when `sl-button` was disabled, causing tooltips to erroneously appear
+- Fixed a bug where mouse events would bubble up when `sl-button` was disabled, causing tooltips to erroneously appear
+- Fixed a bug where pressing space would open and immediately close `sl-dropdown` panels in Firefox
 - Fixed buggy custom keyframes animation example
 - Refactored clear logic in `sl-input`
 
diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx
index 13032795e..31e19deeb 100644
--- a/src/components/dropdown/dropdown.tsx
+++ b/src/components/dropdown/dropdown.tsx
@@ -111,6 +111,7 @@ export class Dropdown {
     this.handlePanelSelect = this.handlePanelSelect.bind(this);
     this.handleTriggerClick = this.handleTriggerClick.bind(this);
     this.handleTriggerKeyDown = this.handleTriggerKeyDown.bind(this);
+    this.handleTriggerKeyUp = this.handleTriggerKeyUp.bind(this);
   }
 
   componentDidLoad() {
@@ -303,6 +304,13 @@ export class Dropdown {
     }
   }
 
+  handleTriggerKeyUp(event: KeyboardEvent) {
+    // Prevent space from triggering a click event in Firefox
+    if (event.key === ' ') {
+      event.preventDefault();
+    }
+  }
+
   render() {
     return (
       <div
@@ -321,6 +329,7 @@ export class Dropdown {
           ref={el => (this.trigger = el)}
           onClick={this.handleTriggerClick}
           onKeyDown={this.handleTriggerKeyDown}
+          onKeyUp={this.handleTriggerKeyUp}
         >
           <slot name="trigger" />
         </span>