fix(Dropdown):make active dropdown item scroll into view on open (#1465)

* fix:make active dropdown item visible into view(#1388)

* fix:check this.ref, menu, item in scrollSelectedItemIntoView method

* test(Dropdown): scroll item into view on open

src/modules/Dropdown/Dropdown.js

@@ -447,6 +447,7 @@ export default class Dropdown extends Component {
       document.addEventListener('click', this.closeOnDocumentClick)
       document.removeEventListener('keydown', this.openOnArrow)
       document.removeEventListener('keydown', this.openOnSpace)
+      this.scrollSelectedItemIntoView()
     } else if (prevState.open && !this.state.open) {
       debug('dropdown closed')
       this.handleClose()
@@ -939,8 +940,11 @@ export default class Dropdown extends Component {
 
   scrollSelectedItemIntoView = () => {
     debug('scrollSelectedItemIntoView()')
+    if (!this.ref) return
     const menu = this.ref.querySelector('.menu.visible')
+    if (!menu) return
     const item = menu.querySelector('.item.selected')
+    if (!item) return
     debug(`menu: ${menu}`)
     debug(`item: ${item}`)
     const isOutOfUpperView = item.offsetTop < menu.scrollTop
@@ -962,6 +966,7 @@ export default class Dropdown extends Component {
     if (onOpen) onOpen(e, this.props)
 
     this.trySetState({ open: true })
+    this.scrollSelectedItemIntoView()
   }
 
   close = (e) => {

test/specs/modules/Dropdown/Dropdown-test.js

@@ -1066,6 +1066,20 @@ describe('Dropdown', () => {
         .setProps({ open: true })
       dropdownMenuIsOpen()
     })
+    it('calls scrollSelectedItemIntoView when changed from false to true', () => {
+      wrapperMount(<Dropdown options={options} selection open={false} />)
+
+      const instance = wrapper.instance()
+      sandbox.spy(instance, 'scrollSelectedItemIntoView')
+
+      instance.scrollSelectedItemIntoView
+        .should.not.have.been.called()
+
+      wrapper.setProps({ open: true })
+
+      instance.scrollSelectedItemIntoView
+        .should.have.been.calledOnce()
+    })
   })
 
   describe('multiple', () => {