[EP-3941]: Add prop to Select to disable portalling

[PatrickDeVries]

What

• Add disablePortal prop to Select and forward it to the Dropdown

Why

EP-3941

In OV, we are having an intermittent issue where the period select dropdown randomly fails to open.

After much debugging, it appears that the issue is caused by the dropdown floating portal attempting to append the element in a portal with an ID that no longer exists in the DOM, so nothing happens. The underlying reason for why this portal is removed from the DOM is unclear to me, but I suspect is related to this issue in React relating to useId in a Suspense. This is not something we can fix ourselves, but since Dropdown supports absolute positioning and Select already has position: relative; we can just not portal the element for this particular select as a workaround for now, and just need the prop to be passed along to make it happen.

Other notes:

In case you see a different fix or root cause, here is how I narrowed down the source of the issue to the floating portal: I was able to reproduce the issue locally by refreshing on the Good Vibes page and clicking the dropdown until I see it does not open. In the node_modules source code for Select I added a mutation observer to the body (where elements are portalled to), which watches for node addition/removal and logs when nodes are added/removed as well as the current state of the expected floating portal node in the DOM based upon the ID.

The result:

We can see the element is created as expected, then is appended and present in the DOM. Then a node with a different ID is removed, but this node also leaves the DOM and becomes null. This only seems to happen when the IDs are 2 characters, but other than that I do not know why this happens.

For reference, here is what is logged when it successfully opens, where we can see the expected node remains in the DOM:

After testing locally with disablePortal: true on the dropdown the select consistently opens, since there is no portal to be missing.

[netlify]

👷 Deploy request for igloo-ui pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	3d8145a

[changeset-bot]

🦋 Changeset detected

Latest commit: 3d8145a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@igloo-ui/select	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[alexasselin008]

reopening this PR under my name so the chromatic build passes