The y-position of the list within the PopUpMenu is not calculated correctly while scrolling

Widgets
1

Hi,

My question is: Is there something needed to be set up, so that the y-position of the list within the PopUpMenu can be calculate correctly?

I have build a blank vite dummy project only with the following packages:

"dependencies": {
        "@com.mgmtp.a12.widgets/widgets-core": "^38.1.0",
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
        "styled-components": "^6.1.18"
    },

Then the y-position of List in React.Portal under PopUpMenu is not correct while scrolling. To describe this behaviour I have uploaded a short video here.

2

Hi @danting-misty-mist, You can wrap this component (or at the top level of your application) using WidgetRoot. It’s recommended to use it to avoid any issues related to portals in the future.

3

Hi @tttnguyen , what do you mean by WidgetRoot? Is it a wrapper component that can be imported? I actually couldn’t find any import options for WidgetRoot in the source code.
There is part of code in this dummy project:

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <ThemeProvider theme={flatTheme}>
      <GlobalStyles />
      <div className="test-base" style={{ padding: 10 }}>
        <App />
      </div>
    </ThemeProvider>
  </StrictMode>
);

The PopUpMenu component is in <App/>

4 
import { WidgetsRoot } from "@com.mgmtp.a12.widgets/widgets-core/lib/common";
 createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <ThemeProvider theme={flatTheme}>
      <GlobalStyles />
      <div className="test-base" style={{ padding: 10 }}>
       <WidgetRoot>
        <App />
    </WidgetRoot>
      </div>
    </ThemeProvider>
  </StrictMode>

@danting_feng It’s a wrapper, you can try this!