show/hide shortcut label using CSS

Author: MAX-786

docs/_static/custom.css

@@ -184,6 +184,11 @@ div.admonition.admonition-todo>.admonition-title::before {
   display: block;
 }
 
+#search-form:focus-within #shortcut-page,
+#search-form:focus-within #shortcut {
+  display: none;
+}
+
 #shortcut-page.input-group-text {
   padding-top: 0;
   padding-bottom: 0;

docs/_static/search_shortcut.js

@@ -12,29 +12,13 @@
                 $('#q').focus();
             }
         });
-        
-        $('#q').focus(() => {
-            $('#shortcut-page').hide();
-        });
-        $('#q').blur(() => {
-            $('#shortcut-page').show();
-        });
-        
-        
     } else {
         $(document).keydown(function(event) {
             if ((event.ctrlKey || event.metaKey) && event.key == "k") {
                 event.preventDefault();
                 $('#search-input').focus();
             }
         });
-
-        $('#search-input').focus(() => {
-            $('#shortcut').hide();
-        });
-        $('#search-input').blur(() => {
-            $('#shortcut').show();
-        });
     }
 
     // if OS isn't Mac change visual indication of search field