feat(Dropdown): close on blur (#467)

Semantic-Org · Sep 5, 2016 · 3580fff · 3580fff
1 parent 50ee76c
commit 3580fff
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 19 deletions.
diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
@@ -280,6 +280,7 @@ export default class Dropdown extends Component {
       document.removeEventListener('keydown', this.moveSelectionOnKeyDown)
       document.removeEventListener('keydown', this.selectItemOnEnter)
       document.removeEventListener('keydown', this.removeItemOnBackspace)
+      this.close()
     }
 
     // opened / closed
@@ -299,6 +300,10 @@ export default class Dropdown extends Component {
       document.removeEventListener('keydown', this.selectItemOnEnter)
       document.removeEventListener('keydown', this.removeItemOnBackspace)
       document.removeEventListener('click', this.closeOnDocumentClick)
+      if (prevState.focus && this.state.focus) {
+        document.addEventListener('keydown', this.openOnArrow)
+        document.addEventListener('keydown', this.openOnSpace)
+      }
     }
   }
 
@@ -476,11 +481,6 @@ export default class Dropdown extends Component {
     debug('handleBlur()')
     const { onBlur } = this.props
     if (onBlur) onBlur(e)
-    // TODO
-    // handleBlur() is called on mouse down
-    // handleClickItem() it called on mouse up
-    // item clicks are circumvented by calling close() here
-    // this.close()
     this.setState({ focus: false })
   }
 
@@ -798,6 +798,7 @@ export default class Dropdown extends Component {
         active={isActive(opt.value)}
         onClick={this.handleItemClick}
         selected={selectedIndex === i}
+        onMouseDown={e => e.preventDefault()} // prevent default to allow item select without closing on blur
         {...opt}
       />
     ))

diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js
@@ -70,18 +70,18 @@ describe('Dropdown Component', () => {
   common.propKeyOnlyToClassName(Dropdown, 'search')
   common.propKeyOnlyToClassName(Dropdown, 'selection')
 
-  // TODO: see Dropdown.handleBlur() todo
-  // it('closes on blur', () => {
-  //   wrapperMount(<Dropdown {...requiredProps} />)
-  //     .simulate('click')
-  //
-  //   dropdownMenuIsOpen()
-  //
-  //   wrapper
-  //     .simulate('blur')
-  //
-  //   dropdownMenuIsClosed()
-  // })
+  it('closes on blur', () => {
+    wrapperMount(<Dropdown options={options} />)
+      .simulate('focus')
+      .simulate('click')
+
+    dropdownMenuIsOpen()
+
+    wrapper
+      .simulate('blur')
+
+    dropdownMenuIsClosed()
+  })
 
   // TODO: see Dropdown.handleFocus() todo
   // it('opens on focus', () => {
@@ -462,6 +462,23 @@ describe('Dropdown Component', () => {
       dropdownMenuIsClosed()
     })
 
+    it('blurs after menu item click (mousedown)', () => {
+      wrapperMount(<Dropdown options={options} selection />)
+      const item = wrapper
+        .find('DropdownItem')
+        .at(_.random(options.length - 1))
+
+      // open
+      wrapper.simulate('click')
+      dropdownMenuIsOpen()
+
+      // select item
+      item.simulate('mousedown')
+      dropdownMenuIsOpen()
+      item.simulate('click')
+      dropdownMenuIsClosed()
+    })
+
     it('closes on click outside', () => {
       wrapperMount(<Dropdown options={options} selection />)
 
@@ -988,12 +1005,13 @@ describe('Dropdown Component', () => {
         .first()
         .should.have.prop('selected', true)
 
-      // blur, focus, move item selection down
+      // blur, focus, open, move item selection down
       search
         .simulate('blur')
         .simulate('focus')
 
       domEvent.keyDown(document, { key: 'ArrowDown' })
+      domEvent.keyDown(document, { key: 'ArrowDown' })
 
       items
         .first()
@@ -1003,11 +1021,12 @@ describe('Dropdown Component', () => {
         .at(1)
         .should.have.prop('selected', true)
 
-      // blur, focus, move item selection up
+      // blur, focus, open, move item selection up
       search
         .simulate('blur')
         .simulate('focus')
 
+      domEvent.keyDown(document, { key: 'ArrowDown' })
       domEvent.keyDown(document, { key: 'ArrowUp' })
 
       items