diff --git a/src/ui/components/pages/tools/tools.jsx b/src/ui/components/pages/tools/tools.jsx index c67475e..2abbebe 100644 --- a/src/ui/components/pages/tools/tools.jsx +++ b/src/ui/components/pages/tools/tools.jsx @@ -7,18 +7,24 @@ import Grid from '@mui/material/Grid'; import Card from '@mui/material/Card'; import { TreeFilter } from 'ui/components/shared/treeFilter/treeFilter'; import { ProductContentBloc } from 'ui/components/pages/tools/productContentBloc/productContentBloc'; +import { scrollToElement } from 'ui/utils/scrollToElement'; export const Tools = () => { const { classes, cx } = useStyles(); const [searchParams, updateParams] = useTreeUrlParams(); + + // TODO -> Refactor using ref and no setTimeout + const [products, setProducts] = useState([]); const { getProducts } = useContext(CoreApiContext); window.scrollTo(); + useEffect(() => { getProducts().then((r) => setProducts(r)); }, [getProducts]); + return (
@@ -32,6 +38,7 @@ export const Tools = () => { setTreeState={updateParams} tree={products['children'] ?? []} autoComplete={{ isEnabled: false }} + onSelect={scrollToElement} /> diff --git a/src/ui/utils/scrollToElement.js b/src/ui/utils/scrollToElement.js new file mode 100644 index 0000000..4446b69 --- /dev/null +++ b/src/ui/utils/scrollToElement.js @@ -0,0 +1,13 @@ +export const scrollToElement = (id) => { + const element = document.getElementById(id); + + if (!element) return; + + return setTimeout( + () => + element.scrollIntoView({ + behavior: 'smooth', + }), + 100 + ); +};