From a1a7f7575f065442a3ce1fbe15bd2db53582c09e Mon Sep 17 00:00:00 2001 From: vipierozan99 Date: Fri, 28 Feb 2025 13:52:32 +0100 Subject: [PATCH 1/4] add test --- .../useScrollTrigger/useScrollTrigger.test.js | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/packages/mui-material/src/useScrollTrigger/useScrollTrigger.test.js b/packages/mui-material/src/useScrollTrigger/useScrollTrigger.test.js index 95b1aaa3f28151..fceb9a8e08df8e 100644 --- a/packages/mui-material/src/useScrollTrigger/useScrollTrigger.test.js +++ b/packages/mui-material/src/useScrollTrigger/useScrollTrigger.test.js @@ -46,6 +46,26 @@ describe('useScrollTrigger', () => { expect(triggerRef.current.textContent).to.equal('false'); expect(getRenderCountRef.current()).to.equal(2); }); + + it('should do nothing when ref is null', () => { + const getRenderCountRef = React.createRef(); + const triggerRef = React.createRef(); + function TestWithNullRef() { + const [container, setContainer] = React.useState(null); + const trigger = useScrollTrigger({ + target: container, + }); + return ( + + {`${trigger}`} + + + ); + } + render(); + expect(triggerRef.current.textContent).to.equal('false'); + expect(getRenderCountRef.current()).to.equal(2); + }); }); describe('scroll', () => { From de8d14d705aefec1100c40234000e75b255706bd Mon Sep 17 00:00:00 2001 From: vipierozan99 Date: Fri, 28 Feb 2025 13:52:58 +0100 Subject: [PATCH 2/4] do nothing and return false when target is null --- .../mui-material/src/useScrollTrigger/useScrollTrigger.d.ts | 2 +- .../mui-material/src/useScrollTrigger/useScrollTrigger.js | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/useScrollTrigger/useScrollTrigger.d.ts b/packages/mui-material/src/useScrollTrigger/useScrollTrigger.d.ts index f2df8e69073c49..94c6785dd7e15c 100644 --- a/packages/mui-material/src/useScrollTrigger/useScrollTrigger.d.ts +++ b/packages/mui-material/src/useScrollTrigger/useScrollTrigger.d.ts @@ -1,6 +1,6 @@ export interface UseScrollTriggerOptions { disableHysteresis?: boolean; - target?: Node | Window; + target?: Node | Window | null; threshold?: number; } diff --git a/packages/mui-material/src/useScrollTrigger/useScrollTrigger.js b/packages/mui-material/src/useScrollTrigger/useScrollTrigger.js index 3a7ec692031a0e..6f74dede9ce9e4 100644 --- a/packages/mui-material/src/useScrollTrigger/useScrollTrigger.js +++ b/packages/mui-material/src/useScrollTrigger/useScrollTrigger.js @@ -26,6 +26,10 @@ export default function useScrollTrigger(options = {}) { const store = React.useRef(); const [trigger, setTrigger] = React.useState(() => getTrigger(store, other)); React.useEffect(() => { + if (target === null) { + setTrigger(false); + return + } const handleScroll = () => { setTrigger(getTrigger(store, { target, ...other })); }; From b01eb82caaa68f5f72039a2fd2e01d92b4d89ffb Mon Sep 17 00:00:00 2001 From: vipierozan99 Date: Fri, 28 Feb 2025 13:52:32 +0100 Subject: [PATCH 3/4] add test --- .../useScrollTrigger/useScrollTrigger.test.js | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/packages/mui-material/src/useScrollTrigger/useScrollTrigger.test.js b/packages/mui-material/src/useScrollTrigger/useScrollTrigger.test.js index 95b1aaa3f28151..fceb9a8e08df8e 100644 --- a/packages/mui-material/src/useScrollTrigger/useScrollTrigger.test.js +++ b/packages/mui-material/src/useScrollTrigger/useScrollTrigger.test.js @@ -46,6 +46,26 @@ describe('useScrollTrigger', () => { expect(triggerRef.current.textContent).to.equal('false'); expect(getRenderCountRef.current()).to.equal(2); }); + + it('should do nothing when ref is null', () => { + const getRenderCountRef = React.createRef(); + const triggerRef = React.createRef(); + function TestWithNullRef() { + const [container, setContainer] = React.useState(null); + const trigger = useScrollTrigger({ + target: container, + }); + return ( + + {`${trigger}`} + + + ); + } + render(); + expect(triggerRef.current.textContent).to.equal('false'); + expect(getRenderCountRef.current()).to.equal(2); + }); }); describe('scroll', () => { From 680496fbd1a6363c7d68301401bdbabeb7d0ca45 Mon Sep 17 00:00:00 2001 From: vipierozan99 Date: Fri, 28 Feb 2025 13:52:58 +0100 Subject: [PATCH 4/4] do nothing and return false when target is null --- .../mui-material/src/useScrollTrigger/useScrollTrigger.d.ts | 2 +- .../mui-material/src/useScrollTrigger/useScrollTrigger.js | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/useScrollTrigger/useScrollTrigger.d.ts b/packages/mui-material/src/useScrollTrigger/useScrollTrigger.d.ts index f2df8e69073c49..94c6785dd7e15c 100644 --- a/packages/mui-material/src/useScrollTrigger/useScrollTrigger.d.ts +++ b/packages/mui-material/src/useScrollTrigger/useScrollTrigger.d.ts @@ -1,6 +1,6 @@ export interface UseScrollTriggerOptions { disableHysteresis?: boolean; - target?: Node | Window; + target?: Node | Window | null; threshold?: number; } diff --git a/packages/mui-material/src/useScrollTrigger/useScrollTrigger.js b/packages/mui-material/src/useScrollTrigger/useScrollTrigger.js index 3a7ec692031a0e..142618d314b3e0 100644 --- a/packages/mui-material/src/useScrollTrigger/useScrollTrigger.js +++ b/packages/mui-material/src/useScrollTrigger/useScrollTrigger.js @@ -26,6 +26,10 @@ export default function useScrollTrigger(options = {}) { const store = React.useRef(); const [trigger, setTrigger] = React.useState(() => getTrigger(store, other)); React.useEffect(() => { + if (target === null) { + setTrigger(false); + return undefined; + } const handleScroll = () => { setTrigger(getTrigger(store, { target, ...other })); };