fix: do not focus on buttons that are hidden via CSS

Author: keithamus

index.js

@@ -18,7 +18,9 @@ const buttonSelectors = [
 function getButtons(toolbar: Element): Element[] {
   const els = []
   for (const button of toolbar.querySelectorAll(buttonSelectors.join(', '))) {
-    if (button.closest('markdown-toolbar') === toolbar && !button.hidden) els.push(button)
+    // Skip buttons that are hidden, either via `hidden` attribute or CSS:
+    if (button.hidden || (button.offsetWidth <= 0 && button.offsetHeight <= 0)) continue
+    if (button.closest('markdown-toolbar') === toolbar) els.push(button)
   }
   return els
 }

test/test.js

@@ -71,7 +71,9 @@ describe('markdown-toolbar-element', function() {
           <md-bold>bold</md-bold>
           <md-header>header</md-header>
           <md-header level="1">h1</md-header>
-          <md-header level="5" hidden>h1</md-header>
+          <div hidden>
+            <md-header level="5">h1</md-header>
+          </div>
           <md-header level="10">h1</md-header>
           <div data-md-button>Other button</div>
           <md-italic>italic</md-italic>