Fixes #208

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`
 

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>