Dropdown does not respect boundary in strict mode (react 18)

[jannec22]

Prerequisites

• I am using the correct version of React-Bootstrap for my version of Bootstrap
• I have searched for duplicate or closed issues
• I have read the contributing guidelines

Describe the bug

When rendering Dropdown inside React.StrictMode, Dropdown.Menu does not respect horizontal boundary, and causes horizontal overflow.

Expected behavior

Dropdown should work properly inside Strict Mode

To Reproduce

start a fresh create-react-app project, install react18-rc.1, bootstrap 5, and react-bootstrap 2.X
render Dropdown inside StrictMode close to the edge of the screen.

Reproducible Example

see sandbox

Screenshots

with strict mode:

without strict mode:

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Chrome

What version of React-Bootstrap are you using?

2.2.0

What version of Bootstrap are you using?

5.1.3

Additional context

No response

[golota60]

I've done a brief investigation using react ver 18.0.0-rc3, and found a few things.

On the surface, the problem is that the component rendered in StrictMode is not receiving style props.
From a code perspective, it looks like upstream's useDropdownMenu is not returning the same values with and w/o StrictMode , even though the functions receive exactly the same input data. It seems like this is an effect of React 18's strict mode changes. My best bet it's because upstream's usePopper function is not correctly handling the new mount -> unmount -> mount pattern.

I'll try to fix it upstream over the next few days, posting this comment so that in case im unable to fix it someone can benefit from this little investigation

[golota60]

Update: the issue seems to be with upstream's useSafeState hook. At some point the useMounted hook thinks the component is unmounted, and doesn't update the state, this is probably related with React 18's changes to StrictMode. I've created a fix upstream, once the issue is fixed and released i'll update the dependency in this repo