diff --git a/src/behaviors/Visibility/Visibility.js b/src/behaviors/Visibility/Visibility.js
index a9a7b576d2..cf4c3a3d81 100644
--- a/src/behaviors/Visibility/Visibility.js
+++ b/src/behaviors/Visibility/Visibility.js
@@ -200,7 +200,8 @@ export default class Visibility extends Component {
const { context, fireOnMount } = this.props
this.pageYOffset = window.pageYOffset
- eventStack.sub('scroll', this.handleScroll, { target: context })
+ eventStack.sub('resize', this.handleUpdate, { target: context })
+ eventStack.sub('scroll', this.handleUpdate, { target: context })
if (fireOnMount) this.update()
}
@@ -208,7 +209,8 @@ export default class Visibility extends Component {
componentWillUnmount() {
const { context } = this.props
- eventStack.unsub('scroll', this.handleScroll, { target: context })
+ eventStack.unsub('resize', this.handleUpdate, { target: context })
+ eventStack.unsub('scroll', this.handleUpdate, { target: context })
}
// ----------------------------------------
@@ -261,7 +263,7 @@ export default class Visibility extends Component {
})
}
- handleScroll = () => {
+ handleUpdate = () => {
if (this.ticking) return
this.ticking = true
diff --git a/src/modules/Sticky/Sticky.js b/src/modules/Sticky/Sticky.js
index 819b2b2827..d8e80a74ea 100644
--- a/src/modules/Sticky/Sticky.js
+++ b/src/modules/Sticky/Sticky.js
@@ -129,12 +129,14 @@ export default class Sticky extends Component {
addListener = () => {
const { scrollContext } = this.props
+ eventStack.sub('resize', this.handleUpdate, { target: scrollContext })
eventStack.sub('scroll', this.handleUpdate, { target: scrollContext })
}
removeListener = () => {
const { scrollContext } = this.props
+ eventStack.unsub('resize', this.handleUpdate, { target: scrollContext })
eventStack.unsub('scroll', this.handleUpdate, { target: scrollContext })
}
diff --git a/test/specs/behaviors/Visibility/Visibility-test.js b/test/specs/behaviors/Visibility/Visibility-test.js
index d40777bc36..7c0cb97666 100644
--- a/test/specs/behaviors/Visibility/Visibility-test.js
+++ b/test/specs/behaviors/Visibility/Visibility-test.js
@@ -401,6 +401,14 @@ describe('Visibility', () => {
onUpdate.should.have.been.calledTwice()
})
+ it('fires when window resized', () => {
+ const onUpdate = sandbox.spy()
+ wrapperMount()
+
+ domEvent.resize(window)
+ onUpdate.should.have.been.calledOnce()
+ })
+
it('passes calculations to onUpdate', () => {
let calculations
const onUpdate = (e, props) => (calculations = props.calculations)
diff --git a/test/specs/modules/Sticky/Sticky-test.js b/test/specs/modules/Sticky/Sticky-test.js
index 5dfb17772e..92d9dbef4b 100644
--- a/test/specs/modules/Sticky/Sticky-test.js
+++ b/test/specs/modules/Sticky/Sticky-test.js
@@ -304,4 +304,22 @@ describe('Sticky', () => {
onStick.should.have.been.called()
})
})
+
+ describe('update', () => {
+ it('is called on scroll', () => {
+ const instance = mount().instance()
+ const update = sandbox.spy(instance, 'update')
+
+ domEvent.scroll(window)
+ update.should.have.been.calledOnce()
+ })
+
+ it('is called on resize', () => {
+ const instance = mount().instance()
+ const update = sandbox.spy(instance, 'update')
+
+ domEvent.resize(window)
+ update.should.have.been.calledOnce()
+ })
+ })
})
diff --git a/test/utils/domEvent.js b/test/utils/domEvent.js
index d12dacff54..cc58cd7814 100644
--- a/test/utils/domEvent.js
+++ b/test/utils/domEvent.js
@@ -66,6 +66,14 @@ export const mouseOver = (node, data) => fire(node, 'mouseover', data)
*/
export const mouseUp = (node, data) => fire(node, 'mouseup', data)
+/**
+ * Dispatch a 'resize' 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 resize = (node, data) => fire(node, 'resize', data)
+
/**
* Dispatch a 'scroll' event on a DOM node.
* @param {String|Object} node A querySelector string or DOM node.
@@ -82,5 +90,6 @@ export default {
mouseLeave,
mouseOver,
mouseUp,
+ resize,
scroll,
}