Search box: make found options selectable with click

storybookjs · Aug 27, 2017 · 1ac70f8 · 1ac70f8
1 parent e877afc
commit 1ac70f8
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 4 deletions.
diff --git a/lib/ui/package.json b/lib/ui/package.json
@@ -30,6 +30,7 @@
     "podda": "^1.2.2",
     "prop-types": "^15.5.10",
     "qs": "^6.4.0",
+    "react-fuzzy": "^0.4.1",
     "react-icons": "^2.2.5",
     "react-inspector": "^2.1.1",
     "react-komposer": "^2.0.0",

diff --git a/lib/ui/src/modules/ui/components/search_box.js b/lib/ui/src/modules/ui/components/search_box.js
@@ -2,7 +2,7 @@ import { document } from 'global';
 import PropTypes from 'prop-types';
 import React from 'react';
 import ReactModal from 'react-modal';
-import FuzzySearch from '@storybook/react-fuzzy';
+import FuzzySearch from 'react-fuzzy';
 
 import { baseFonts } from '@storybook/components';
 
@@ -48,11 +48,18 @@ const formatStories = stories => {
   return formattedStories;
 };
 
-const suggestionTemplate = (props, state, styles) =>
+const suggestionTemplate = (props, state, styles, clickHandler) =>
   state.results.map((val, i) => {
     const style = state.selectedIndex === i ? styles.selectedResultStyle : styles.resultsStyle;
     return (
-      <div key={val.value} style={style}>
+      // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+      <div
+        role="option"
+        aria-selected={state.selectedIndex === i}
+        key={val.value}
+        style={style}
+        onClick={() => clickHandler(i)}
+      >
         {val.value}
         <span style={{ float: 'right', opacity: 0.5 }}>
           {val.type === 'story' ? `in ${val.kind}` : 'Kind'}

diff --git a/lib/ui/src/modules/ui/components/search_box.test.js b/lib/ui/src/modules/ui/components/search_box.test.js
@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import React from 'react';
 import ReactModal from 'react-modal';
 import FuzzySearch from '@storybook/react-fuzzy';
@@ -104,5 +104,17 @@ describe('manager.ui.components.search_box', () => {
       expect(onSelectStory).toHaveBeenCalledWith('b', 'a');
       expect(onClose).toHaveBeenCalled();
     });
+
+    test('should handle selecting a story with click', () => {
+      const onSelectStory = jest.fn();
+      const onClose = jest.fn();
+      const wrap = mount(<SearchBox onSelectStory={onSelectStory} onClose={onClose} />);
+
+      const option = wrap.findWhere(el => el.key() === 'a');
+      option.simulate('click');
+
+      expect(onSelectStory).toHaveBeenCalledWith('b', 'a');
+      expect(onClose).toHaveBeenCalled();
+    });
   });
 });