fix(button): prevent container keys ui flash (#1033)

Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com>
algolia · Jul 23, 2021 · 7fad6a4 · 7fad6a4
1 parent e37161a
commit 7fad6a4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 13 deletions.
diff --git a/packages/docsearch-css/src/button.css b/packages/docsearch-css/src/button.css
@@ -43,6 +43,7 @@
 
 .DocSearch-Button-Keys {
   display: flex;
+  min-width: calc(2 * 20px + 2 * 0.4em);
 }
 
 .DocSearch-Button-Key {
@@ -62,11 +63,7 @@
 }
 
 @media (max-width: 750px) {
-  .DocSearch-Button-KeySeparator,
-  .DocSearch-Button-Key {
-    display: none;
-  }
-
+  .DocSearch-Button-Keys,
   .DocSearch-Button-Placeholder {
     display: none;
   }

diff --git a/packages/docsearch-react/src/DocSearchButton.tsx b/packages/docsearch-react/src/DocSearchButton.tsx
@@ -47,14 +47,16 @@ export const DocSearchButton = React.forwardRef<
         <span className="DocSearch-Button-Placeholder">{buttonText}</span>
       </span>
 
-      {key !== null && (
-        <span className="DocSearch-Button-Keys">
-          <span className="DocSearch-Button-Key">
-            {key === ACTION_KEY_DEFAULT ? <ControlKeyIcon /> : key}
-          </span>
-          <span className="DocSearch-Button-Key">K</span>
-        </span>
-      )}
+      <span className="DocSearch-Button-Keys">
+        {key !== null && (
+          <>
+            <span className="DocSearch-Button-Key">
+              {key === ACTION_KEY_DEFAULT ? <ControlKeyIcon /> : key}
+            </span>
+            <span className="DocSearch-Button-Key">K</span>
+          </>
+        )}
+      </span>
     </button>
   );
 });