diff --git a/docs/app/Components/IconSearch/IconSearch.js b/docs/app/Components/IconSearch/IconSearch.js index e60843e407..d4346409e6 100644 --- a/docs/app/Components/IconSearch/IconSearch.js +++ b/docs/app/Components/IconSearch/IconSearch.js @@ -75,7 +75,7 @@ export default class IconSearch extends Component { renderIconColumn = (name) => ( { + handlePortalMouseEnter = (e) => { // In order to enable mousing from the trigger to the portal, we need to // clear the mouseleave timer that was set when leaving the trigger. const { closeOnPortalMouseLeave } = this.props if (!closeOnPortalMouseLeave) return - debug('handlePortalMouseOver()') + debug('handlePortalMouseEnter()') clearTimeout(this.mouseLeaveTimer) } @@ -272,7 +272,7 @@ class Portal extends Component { } handleTriggerMouseLeave = (e) => { - clearTimeout(this.mouseOverTimer) + clearTimeout(this.mouseEnterTimer) const { trigger, closeOnTriggerMouseLeave, mouseLeaveDelay } = this.props @@ -285,18 +285,18 @@ class Portal extends Component { this.mouseLeaveTimer = this.closeWithTimeout(e, mouseLeaveDelay) } - handleTriggerMouseOver = (e) => { + handleTriggerMouseEnter = (e) => { clearTimeout(this.mouseLeaveTimer) - const { trigger, mouseOverDelay, openOnTriggerMouseOver } = this.props + const { trigger, mouseEnterDelay, openOnTriggerMouseEnter } = this.props // Call original event handler - _.invoke(trigger, 'props.onMouseOver', e) + _.invoke(trigger, 'props.onMouseEnter', this.handleTriggerMouseEnter) - if (!openOnTriggerMouseOver) return + if (!openOnTriggerMouseEnter) return - debug('handleTriggerMouseOver()') - this.mouseOverTimer = this.openWithTimeout(e, mouseOverDelay) + debug('handleTriggerMouseEnter()') + this.mouseEnterTimer = this.openWithTimeout(e, mouseEnterDelay) } // ---------------------------------------- @@ -353,7 +353,7 @@ class Portal extends Component { // when re-rendering, first remove listeners before re-adding them to the new node if (this.portal) { this.portal.removeEventListener('mouseleave', this.handlePortalMouseLeave) - this.portal.removeEventListener('mouseover', this.handlePortalMouseOver) + this.portal.removeEventListener('mouseenter', this.handlePortalMouseEnter) } ReactDOM.unstable_renderSubtreeIntoContainer( @@ -365,7 +365,7 @@ class Portal extends Component { this.portal = this.node.firstElementChild this.portal.addEventListener('mouseleave', this.handlePortalMouseLeave) - this.portal.addEventListener('mouseover', this.handlePortalMouseOver) + this.portal.addEventListener('mouseenter', this.handlePortalMouseEnter) } mountPortal = () => { @@ -399,7 +399,7 @@ class Portal extends Component { this.node.parentNode.removeChild(this.node) this.portal.removeEventListener('mouseleave', this.handlePortalMouseLeave) - this.portal.removeEventListener('mouseover', this.handlePortalMouseOver) + this.portal.removeEventListener('mouseenter', this.handlePortalMouseEnter) this.node = null this.portal = null @@ -421,7 +421,7 @@ class Portal extends Component { onClick: this.handleTriggerClick, onFocus: this.handleTriggerFocus, onMouseLeave: this.handleTriggerMouseLeave, - onMouseOver: this.handleTriggerMouseOver, + onMouseEnter: this.handleTriggerMouseEnter, }) } } diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js index 372271e05c..a177798f53 100644 --- a/src/modules/Popup/Popup.js +++ b/src/modules/Popup/Popup.js @@ -257,11 +257,11 @@ export default class Popup extends Component { portalProps.openOnTriggerFocus = true portalProps.closeOnTriggerBlur = true } else if (on === 'hover') { - portalProps.openOnTriggerMouseOver = true + portalProps.openOnTriggerMouseEnter = true portalProps.closeOnTriggerMouseLeave = true // Taken from SUI: https://git.io/vPmCm portalProps.mouseLeaveDelay = 70 - portalProps.mouseOverDelay = 50 + portalProps.mouseEnterDelay = 50 } return portalProps diff --git a/test/specs/addons/Portal/Portal-test.js b/test/specs/addons/Portal/Portal-test.js index d36f145cd3..8c3d6bcb3c 100644 --- a/test/specs/addons/Portal/Portal-test.js +++ b/test/specs/addons/Portal/Portal-test.js @@ -271,14 +271,14 @@ describe('Portal', () => { }) }) - describe('openOnTriggerMouseOver', () => { - it('should not open portal on mouseover when not set', (done) => { + describe('openOnTriggerMouseEnter', () => { + it('should not open portal on mouseenter when not set', (done) => { const spy = sandbox.spy() - const trigger = - const mouseOverDelay = 100 - wrapperMount(

Hi

) + const trigger = + const mouseEnterDelay = 100 + wrapperMount(

Hi

) - wrapper.find('button').simulate('mouseover') + wrapper.find('button').simulate('mouseenter') document.body.childElementCount.should.equal(0) spy.should.have.been.calledOnce() @@ -286,28 +286,28 @@ describe('Portal', () => { document.body.childElementCount.should.equal(0) spy.should.have.been.calledOnce() done() - }, mouseOverDelay + 1) + }, mouseEnterDelay + 1) }) - it('should open portal on mouseover when set', (done) => { + it('should open portal on mouseenter when set', (done) => { const spy = sandbox.spy() - const trigger = - const mouseOverDelay = 100 + const trigger = + const mouseEnterDelay = 100 wrapperMount( -

Hi

+

Hi

) - wrapper.find('button').simulate('mouseover') + wrapper.find('button').simulate('mouseenter') setTimeout(() => { document.body.childElementCount.should.equal(0) spy.should.have.been.calledOnce() - }, mouseOverDelay - 1) + }, mouseEnterDelay - 1) setTimeout(() => { document.body.lastElementChild.should.equal(wrapper.instance().node) spy.should.have.been.calledOnce() done() - }, mouseOverDelay + 1) + }, mouseEnterDelay + 1) }) }) @@ -383,7 +383,7 @@ describe('Portal', () => { }) describe('closeOnTriggerMouseLeave + closeOnPortalMouseLeave', () => { - it('should close portal on trigger mouseleave even when portal receives mouseover within limit', (done) => { + it('should close portal on trigger mouseleave even when portal receives mouseenter within limit', (done) => { const trigger = const delay = 100 wrapperMount( @@ -392,9 +392,9 @@ describe('Portal', () => { wrapper.find('button').simulate('mouseleave') - // Fire a mouseOver on the portal within the time limit + // Fire a mouseEnter on the portal within the time limit setTimeout(() => { - domEvent.mouseOver(wrapper.instance().node.firstElementChild) + domEvent.mouseEnter(wrapper.instance().node.firstElementChild) }, delay - 1) // The portal should close because closeOnPortalMouseLeave not set @@ -404,7 +404,7 @@ describe('Portal', () => { }, delay + 1) }) - it('should not close portal on trigger mouseleave when portal receives mouseover within limit', (done) => { + it('should not close portal on trigger mouseleave when portal receives mouseenter within limit', (done) => { const trigger = const delay = 100 wrapperMount( @@ -415,9 +415,9 @@ describe('Portal', () => { wrapper.find('button').simulate('mouseleave') - // Fire a mouseOver on the portal within the time limit + // Fire a mouseEnter on the portal within the time limit setTimeout(() => { - domEvent.mouseOver(wrapper.instance().node.firstElementChild) + domEvent.mouseEnter(wrapper.instance().node.firstElementChild) }, delay - 1) // The portal should not have closed diff --git a/test/specs/modules/Popup/Popup-test.js b/test/specs/modules/Popup/Popup-test.js index c9eac8dc21..fd55f5f8d1 100644 --- a/test/specs/modules/Popup/Popup-test.js +++ b/test/specs/modules/Popup/Popup-test.js @@ -176,7 +176,7 @@ describe('Popup', () => { const trigger = wrapperMount() - wrapper.find('button').simulate('mouseover', nativeEvent) + wrapper.find('button').simulate('mouseenter', nativeEvent) setTimeout(() => { assertInBody('.ui.popup.visible') done() diff --git a/test/utils/domEvent.js b/test/utils/domEvent.js index 4774a02fe0..b4d0211ada 100644 --- a/test/utils/domEvent.js +++ b/test/utils/domEvent.js @@ -26,6 +26,14 @@ export const fire = (node, eventType, data = {}) => { */ export const keyDown = (node, data) => fire(node, 'keydown', data) +/** + * Dispatch a 'mouseenter' event on a DOM node. + * @param {String|Object} node A querySelector string or DOM node. + * @param {Object} [data] Additional event data. + * @returns {Object} The event + */ +export const mouseEnter = (node, data) => fire(node, 'mouseenter', data) + /** * Dispatch a 'mouseleave' event on a DOM node. * @param {String|Object} node A querySelector string or DOM node. @@ -60,6 +68,7 @@ export const click = (node, data) => fire(node, 'click', data) export default { fire, + mouseEnter, mouseLeave, mouseOver, mouseUp,