fix(Portal): fix event handling for mouseEnter/mouseLeave (Semantic-Org#4445)

* fix: typo for mouseEnterTimer (Semantic-Org#4442) * fix: typo for mouseLeaveTimer

Author: tourman

src/addons/Portal/Portal.js

@@ -215,7 +215,7 @@ function Portal(props) {
  }
 
  const handleTriggerMouseLeave = (e, ...rest) => {
- clearTimeout(mouseEnterTimer)
+ clearTimeout(mouseEnterTimer.current)
 
  // Call original event handler
  _.invoke(trigger, 'props.onMouseLeave', e, ...rest)
@@ -229,7 +229,7 @@ function Portal(props) {
  }
 
  const handleTriggerMouseEnter = (e, ...rest) => {
- clearTimeout(mouseLeaveTimer)
+ clearTimeout(mouseLeaveTimer.current)
 
  // Call original event handler
  _.invoke(trigger, 'props.onMouseEnter', e, ...rest)

test/specs/addons/Portal/Portal-test.js

@@ -7,6 +7,7 @@ import * as common from 'test/specs/commonTests'
 import { domEvent, sandbox } from 'test/utils'
 import Portal from 'src/addons/Portal/Portal'
 import PortalInner from 'src/addons/Portal/PortalInner'
+import wait from 'test/utils/wait'
 
 let wrapper
 
@@ -371,6 +372,38 @@ describe('Portal', () => {
  done()
  }, 1)
  })
+
+ /**
+ * e--l--d--v
+ * ^: mouseenter
+ * ^: BEFORE_DELAY: mouseleave
+ * ^: expected DELAY
+ * ^: final validation
+ */
+ it('does not open the portal when leave before delay', async () => {
+ const DELAY = 20
+ const BEFORE_DELAY = 10
+
+ wrapperMount(
+ <Portal trigger={<button />} openOnTriggerMouseEnter mouseEnterDelay={DELAY}>
+ <p />
+ </Portal>,
+ )
+
+ wrapper.should.not.have.descendants(PortalInner)
+ wrapper.find('button').simulate('mouseenter')
+
+ await wait(BEFORE_DELAY)
+
+ wrapper.update()
+ wrapper.should.not.have.descendants(PortalInner)
+ wrapper.find('button').simulate('mouseleave')
+
+ await wait(DELAY)
+
+ wrapper.update()
+ wrapper.should.not.have.descendants(PortalInner)
+ })
  })
 
  describe('closeOnTriggerMouseLeave', () => {
@@ -407,6 +440,50 @@ describe('Portal', () => {
  done()
  }, 1)
  })
+
+ /**
+ * e--l--e--d--v
+ * ^: mouseenter
+ * ^: mouseleave
+ * ^: BEFORE_DELAY: reenter
+ * ^: expected DELAY
+ * ^: final validation
+ */
+ it('does not close the portal when reenter before delay', async () => {
+ const DELAY = 20
+ const BEFORE_DELAY = 10
+
+ wrapperMount(
+ <Portal
+ trigger={<button />}
+ openOnTriggerMouseEnter
+ closeOnTriggerMouseLeave
+ mouseLeaveDelay={DELAY}
+ >
+ <p />
+ </Portal>,
+ )
+
+ wrapper.should.not.have.descendants(PortalInner)
+ wrapper.find('button').simulate('mouseenter')
+
+ await wait(BEFORE_DELAY)
+
+ wrapper.update()
+ wrapper.should.have.descendants(PortalInner)
+ wrapper.find('button').simulate('mouseleave')
+
+ await wait(BEFORE_DELAY)
+
+ wrapper.update()
+ wrapper.should.have.descendants(PortalInner)
+ wrapper.find('button').simulate('mouseenter')
+
+ await wait(DELAY)
+
+ wrapper.update()
+ wrapper.should.have.descendants(PortalInner)
+ })
  })
 
  describe('closeOnPortalMouseLeave', () => {

test/utils/wait.js

@@ -0,0 +1,3 @@
+export default function wait(timeout) {
+ return new Promise((resolve) => setTimeout(resolve, timeout))
+}