Open bbishwokarma opened 10 months ago
I'm also seeing this error in React 18 with react-select: 5.7.0
.
Not sure if this an outdated approach but the select menu list is hidden behind other UI elements, and I found a few threads that suggest solving it by adding menuPortalTarget={document.body}
and menuPosition='fixed'
. However, when I also add isSearchable
, any keystroke into the input causes the ResizeObserver loop completed with undelivered notifications.
error to appear.
We see this issue with react-select 5.8.0 with react v16.
Manually testing we didnt see this issue. But when we run automation test see ResizeObserver loop completed with undelivered notifications
. The error will disappear if adding a sleeping before user click on the dropdown menu.
any solution for this error... @bbishwokarma @jkimminau @ranxuan @sunny @jdelStrother . Need Quick Help!
I have been ignoring this issue as it is not impacting user experience and performance. I hope this issue gets resolved in later versions of React.
On Thu, Feb 29, 2024 at 4:39 AM Hamza Tahir @.***> wrote:
any solution for this error... @bbishwokarma https://github.com/bbishwokarma @jkimminau https://github.com/jkimminau @ranxuan https://github.com/ranxuan @sunny https://github.com/sunny @jdelStrother https://github.com/jdelStrother . Need Quick Help!
— Reply to this email directly, view it on GitHub https://github.com/JedWatson/react-select/issues/5761#issuecomment-1970856986, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGEKFYKCYPED2VUYAYICIVDYV4CMVAVCNFSM6AAAAAA5KDTYD6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNZQHA2TMOJYGY . You are receiving this because you were mentioned.Message ID: @.***>
-- Best Regards,
Bikash
Bikash Bishwokarma @.***
Using React v16 (16.14) Using react-select 5.8.0
For us, this appears to happen under the following scenario. We use react-select in a form.
If not using a fixed menu position then there is no error. If not removing multi-select items that would affect the control height then there's no error.
This appears to be an issue with using a fixed menu position when the menu is open and the control needs to resize.
also note: using _menuPlacement="top"_ doesn't cause the ResizeObserver error under the same conditions (most likely because the actual position of the fixed menu doesn't change relative to the control
Here's a simple fix that worked for me:
Add a ref:
const selectRef = useRef(null);
Capture the ref for the Select and add an onChange handler to blur the menu when a change occurs:
<Select
ref={selectRef}
isMulti
menuPosition="fixed"
...
onChange={() => selectRef.current.blur()}
</Select>
Using blur() will close the 'fixed' menu before it needs to change position/size and will not trigger the ResizeObserver error
Hello !
I've been testing on my end and noticed like said previously that the issue occurs when the height of the select element increases due to multiple selected options, causing it to wrap to the next line.
I tried the solution provided by @gspugh-sb , which works well for a simple select. However, for a multi-select dropdown, this causes the dropdown to close after each selection, which is quite inconvenient.
I'm still working on finding a solution, but if anyone already has one, I'd greatly appreciate it ! (I'll update this thread if I found one)
Same issue here. Indeed @gspugh-sb solution works. But I can't now set the property closeMenuOnSelect to false :( (I'm using some external lib which extends react-select). I hope somebody will find the solution!
Overview
My app is listening for
error
event inwindow
object to display errors those are not handled by components. We are usingreact-select
with propertiesisMulti
set to true,menuPosition
set to fixed andmenuIsOpen
set to true until user clicks outside. The error handler receives following error when user selects multiple options and the height of input of React Select grows.Error:
Implementation Details
React version: 16 and 17. This error is not received in React 18. React Select version: 5.7.5
Code: React 17: https://codesandbox.io/s/react-select-v5-resizeobserver-j2plzh?file=/example.js React 16: https://codesandbox.io/s/react-select-resizer-issue-react16-65xdsp?file=/example.tsx React 18: https://codesandbox.io/s/react-select-resizer-issue-react18-qdnpp9?file=/src/App.js
Listening for unhandled errors:
Usage of ReactSelect
Steps to reproduce: Select multiple options. When the input grows the height, the error handler receives the error. Similarly, when we deselect values, and the height of input shrinks, the error handler receives the error.
Expectation
The error is not raised while the height of React Select input grows or shrinks; or a we have way to ignore this error in component level.