Merge pull request #103 from smiclea/fix-dropdown-scroll

Don't close dropdown if user clicks its scrollbar

src/components/molecules/Dropdown/Dropdown.jsx

@@ -210,7 +210,11 @@ class Dropdown extends React.Component {
     }
 
     return (
-      <Wrapper className={this.props.className}>
+      <Wrapper
+        className={this.props.className}
+        onMouseDown={() => { this.itemMouseDown = true }}
+        onMouseUp={() => { this.itemMouseDown = false }}
+      >
         <DropdownButton
           {...this.props}
           onMouseDown={() => { this.itemMouseDown = true }}

src/components/molecules/Dropdown/story.jsx

@@ -37,10 +37,10 @@ class Wrapper extends React.Component {
   render() {
     return (
       <Dropdown
-        {...this.props}
         items={items}
         selectedItem={this.state.selectedItem}
         onChange={item => { this.handleChange(item) }}
+        {...this.props}
       />
     )
   }
@@ -53,3 +53,29 @@ storiesOf('Dropdown', module)
   .add('disabled', () => (
     <Wrapper disabled />
   ))
+  .add('long list', () => (
+    <Wrapper
+      items={[
+        { label: 'Item 1', value: 'item-1' },
+        { label: 'Item 2', value: 'item-2' },
+        { label: 'Item 3', value: 'item-3' },
+        { label: 'Item 4', value: 'item-4' },
+        { label: 'Item 1', value: 'item-1' },
+        { label: 'Item 2', value: 'item-2' },
+        { label: 'Item 3', value: 'item-3' },
+        { label: 'Item 4', value: 'item-4' },
+        { label: 'Item 1', value: 'item-1' },
+        { label: 'Item 2', value: 'item-2' },
+        { label: 'Item 3', value: 'item-3' },
+        { label: 'Item 4', value: 'item-4' },
+        { label: 'Item 1', value: 'item-1' },
+        { label: 'Item 2', value: 'item-2' },
+        { label: 'Item 3', value: 'item-3' },
+        { label: 'Item 4', value: 'item-4' },
+        { label: 'Item 1', value: 'item-1' },
+        { label: 'Item 2', value: 'item-2' },
+        { label: 'Item 3', value: 'item-3' },
+        { label: 'Item 4', value: 'item-4' },
+      ]}
+    />
+  ))