ResizeObserver error when using React Select in React 16 and 17

[bbishwokarma]

Overview

My app is listening for error event in window object to display errors those are not handled by components. We are using react-select with properties isMulti set to true, menuPosition set to fixed and menuIsOpen 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:

ResizeObserver loop completed with undelivered notifications.

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:

window.addEventListener("error", (e) => {
  console.error("global error (ErrorEvent) - ", e);
  alert("Error - " + e.message);
});

Usage of ReactSelect

import Select from "react-select";
import { colourOptions } from "./docs/data";

const SingleSelect = () => (
  <div style={{ width: "300px" }}>
    <Select
      className="basic-single"
      classNamePrefix="select"
      name="color"
      options={colourOptions}
      isMulti
      menuPosition="fixed"
      menuIsOpen={true}
    />
  </div>
);

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.

[jkimminau]

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.

[ranxuan]

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.

[hamzatahir-notell]

any solution for this error... @bbishwokarma @jkimminau @ranxuan @sunny @jdelStrother . Need Quick Help!

[bbishwokarma]

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 @.***

[gspugh-sb]

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.

• Using isMulti
• Using menuPosition="fixed" <- This appears to be important in reproducing
• When the list is open
• Clicking on an individual item to remove it (that would affect the control height), or clicking to remove all items (again affecting control height) causes the ResizeObserver error

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.

[gspugh-sb]

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

[gspugh-sb]

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

[Ourselp]

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)

[mchzawalski]

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!