How to prevent Select component from scrolling the page?

[sesto-dev]

Live demo:

https://create-next-dashboard.vercel.app/products

Source code of this page:

https://github.com/Accretence/create-next-dashboard/blob/main/pages/products/%5B%5B...products%5D%5D.js#L235

Is there a way to prevent select components to scroll the page?

[unix]

I'm not entirely sure what your requirement is, but if you want the positioning of the Select to follow any parent, try the following:

const ref = useRef<HTMLDivElement | null>(null)

<div ref={ref} style={{ position: 'relative' }}>
  <Select getPopupContainer={() => ref.current} />
</div>

[sesto-dev]

I want to prevent this automatic scrolling behaviour:

2022-09-06.13-35-38.mp4

[unix]

If you comment this line of code, everything will be fine:

// _app.js
<Layout essentials={essentials} meta={meta}>                      
</Layout>

This seems to be related to Aryana compatibility, but I'm unsure how it should be fixed.
I suggest you use a standard solution from the community like redux or React Context to do the communication across components.

[sesto-dev]

Thank you for pointing me towards the problem. To the best of my knowledge regarding re-rendering in React, a prop or a state in a component must change for it to re-render, and neither of these 2 things should be happening when a select component is clicked on.

setVisible(next) must be the source of what is happening here but I can't figure out how/ why this is propagating upwards.

https://github.com/geist-org/geist-ui/blob/master/components/select/select.tsx#L114