Respect the enableShortcuts setting for focussing the search input.

lib/ui/src/components/sidebar/Search.stories.tsx

@@ -46,3 +46,9 @@ export const LastViewed = () => (
     )}
   </Search>
 );
+
+export const ShortcutsDisabled = () => (
+  <Search {...baseProps} enableShortcuts={false}>
+    {() => null}
+  </Search>
+);

lib/ui/src/components/sidebar/Search.tsx

@@ -142,10 +142,19 @@ export const Search: FunctionComponent<{
   children: SearchChildrenFn;
   dataset: CombinedDataset;
   isLoading?: boolean;
+  enableShortcuts?: boolean;
   lastViewed: Selection[];
   clearLastViewed: () => void;
   initialQuery?: string;
-}> = ({ children, dataset, isLoading = false, lastViewed, clearLastViewed, initialQuery = '' }) => {
+}> = ({
+  children,
+  dataset,
+  isLoading = false,
+  enableShortcuts = true,
+  lastViewed,
+  clearLastViewed,
+  initialQuery = '',
+}) => {
   const api = useStorybookApi();
   const inputRef = useRef<HTMLInputElement>(null);
   const [inputPlaceholder, setPlaceholder] = useState('Find components');
@@ -162,7 +171,7 @@ export const Search: FunctionComponent<{
 
   useEffect(() => {
     const focusSearch = (event: KeyboardEvent) => {
-      if (isLoading || !inputRef.current) return;
+      if (!enableShortcuts || isLoading || !inputRef.current) return;
       if (event.shiftKey || event.metaKey || event.ctrlKey || event.altKey) return;
       if (event.key === '/' && inputRef.current !== document.activeElement) {
         inputRef.current.focus();
@@ -173,7 +182,7 @@ export const Search: FunctionComponent<{
     // Keyup prevents slashes from ending up in the input field when held down
     document.addEventListener('keyup', focusSearch);
     return () => document.removeEventListener('keyup', focusSearch);
-  }, [inputRef, isLoading]);
+  }, [inputRef, isLoading, enableShortcuts]);
 
   const list: SearchItem[] = useMemo(() => {
     return dataset.entries.reduce((acc: SearchItem[], [refId, { stories }]) => {
@@ -302,7 +311,7 @@ export const Search: FunctionComponent<{
             <SearchField {...getRootProps({ refKey: '' }, { suppressRefError: true })}>
               <SearchIcon icon="search" />
               <Input {...inputProps} />
-              <FocusKey>/</FocusKey>
+              {enableShortcuts && <FocusKey>/</FocusKey>}
               <ClearIcon icon="cross" onClick={() => clearSelection()} />
             </SearchField>
             <FocusContainer tabIndex={0}>

lib/ui/src/components/sidebar/Sidebar.tsx

@@ -83,6 +83,7 @@ export interface SidebarProps {
   storyId?: string;
   refId?: string;
   menuHighlighted?: boolean;
+  enableShortcuts?: boolean;
 }
 
 export const Sidebar: FunctionComponent<SidebarProps> = React.memo(
@@ -94,6 +95,7 @@ export const Sidebar: FunctionComponent<SidebarProps> = React.memo(
     storiesFailed,
     menu,
     menuHighlighted = false,
+    enableShortcuts = true,
     refs = {},
   }) => {
     const selected: Selection = useMemo(() => storyId && { storyId, refId }, [storyId, refId]);
@@ -111,7 +113,12 @@ export const Sidebar: FunctionComponent<SidebarProps> = React.memo(
           <StyledSpaced row={1.6}>
             <Heading className="sidebar-header" menuHighlighted={menuHighlighted} menu={menu} />
 
-            <Search dataset={dataset} isLoading={isLoading} {...lastViewed}>
+            <Search
+              dataset={dataset}
+              isLoading={isLoading}
+              enableShortcuts={enableShortcuts}
+              {...lastViewed}
+            >
               {({
                 inputValue,
                 inputHasFocus,

lib/ui/src/containers/sidebar.tsx

@@ -35,6 +35,7 @@ const Sidebar: FunctionComponent<{}> = React.memo(() => {
       viewMode,
       menu,
       menuHighlighted: api.versionUpdateAvailable(),
+      enableShortcuts,
     };
   };
   return (