diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx index 945fe899122..a23847dbefb 100644 --- a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx +++ b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx @@ -363,7 +363,7 @@ export class CodeEditor extends React.Component { }; componentDidMount() { - this.observer = getResizeObserver(this.navList.current, this.handleScrollButtons); + this.observer = getResizeObserver(this.navList.current, this.handleScrollButtons, true); this.handleScrollButtons(); } diff --git a/packages/react-core/src/components/TextInput/TextInput.tsx b/packages/react-core/src/components/TextInput/TextInput.tsx index ec9ab8b9230..1d81781ba4e 100644 --- a/packages/react-core/src/components/TextInput/TextInput.tsx +++ b/packages/react-core/src/components/TextInput/TextInput.tsx @@ -125,7 +125,7 @@ export class TextInputBase extends React.Component { const masthead = document.getElementsByClassName('pf-c-masthead')[0]; const offsetForPadding = 10; - getResizeObserver(masthead, () => { - if (isVertical) { - setOffsetHeight(masthead.offsetHeight + offsetForPadding); - } else { - // Append jump links nav height to the masthead height when value exists. - const jumpLinksHeaderHeight = document.getElementsByClassName('pf-m-sticky')[0].offsetHeight; - jumpLinksHeaderHeight && setOffsetHeight(masthead.offsetHeight + jumpLinksHeaderHeight + offsetForPadding); - } - }); + getResizeObserver( + masthead, + () => { + if (isVertical) { + setOffsetHeight(masthead.offsetHeight + offsetForPadding); + } else { + // Append jump links nav height to the masthead height when value exists. + const jumpLinksHeaderHeight = document.getElementsByClassName('pf-m-sticky')[0].offsetHeight; + jumpLinksHeaderHeight && setOffsetHeight(masthead.offsetHeight + jumpLinksHeaderHeight + offsetForPadding); + } + }, + true + ); }, [isVertical]); return ( @@ -132,7 +136,6 @@ ScrollspyH2 = () => { }; ``` - ### With drawer This demo shows how jump links can be used in combination with a drawer. diff --git a/packages/react-core/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js b/packages/react-core/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js index ecced5160a2..2513f0e23e2 100644 --- a/packages/react-core/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js +++ b/packages/react-core/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js @@ -32,9 +32,13 @@ export const JumpLinksWithDrawer = () => { const masthead = document.getElementsByClassName('pf-c-masthead')[0]; const drawerToggleSection = document.getElementById('drawer-toggle'); - getResizeObserver(masthead, () => { - setOffsetHeight(masthead.offsetHeight + drawerToggleSection.offsetHeight); - }); + getResizeObserver( + masthead, + () => { + setOffsetHeight(masthead.offsetHeight + drawerToggleSection.offsetHeight); + }, + true + ); }, []); const onCloseClick = () => { diff --git a/packages/react-core/src/helpers/resizeObserver.tsx b/packages/react-core/src/helpers/resizeObserver.tsx index 7a093ab4c71..2d186e65203 100644 --- a/packages/react-core/src/helpers/resizeObserver.tsx +++ b/packages/react-core/src/helpers/resizeObserver.tsx @@ -10,7 +10,7 @@ import { canUseDOM } from './util'; * private observer: any = () => {}; * * public componentDidMount() { - * this.observer = getResizeObserver(this.containerRef.current, this.handleResize); + * this.observer = getResizeObserver(this.containerRef.current, this.handleResize, true); * } * * public componentWillUnmount() { @@ -37,7 +37,7 @@ import { canUseDOM } from './util'; * private observer: any = () => {}; * * public componentDidMount() { - * this.observer = getResizeObserver(this.inputRef.current, this.handleResize); + * this.observer = getResizeObserver(this.inputRef.current, this.handleResize, true); * } * * public componentWillUnmount() { @@ -59,18 +59,18 @@ import { canUseDOM } from './util'; * Example 3 - With debounced method passed in: * * public componentDidMount() { - * this.observer = getResizeObserver(this.inputRef.current, debounce(this.handleResize, 250), false); + * this.observer = getResizeObserver(this.inputRef.current, debounce(this.handleResize, 250)); * } * * @param {Element} containerRefElement The container reference to observe * @param {Function} handleResize The function to call for resize events - * @param {boolean} useRequestAnimationFrame Whether to pass the handleResize function as a callback to requestAnimationFrame. Pass in false when the function passed in is debounced. Defaults to true. + * @param {boolean} useRequestAnimationFrame Whether to pass the handleResize function as a callback to requestAnimationFrame. Pass in true when the function passed in is not debounced. * @return {Function} The function used to unobserve resize events */ export const getResizeObserver = ( containerRefElement: Element, handleResize: () => void, - useRequestAnimationFrame: boolean = true + useRequestAnimationFrame?: boolean ) => { let unobserve: any;