React-select: Dynamic styles get created in a parent window instead of a popup window

Created on 12 Feb 2020 · 9Comments · Source: JedWatson/react-select

Seeing glitchy UI:

When opening the dropdown:

When right-clicking:

I have this component in both a normal browser window and a popout window (created through react-new-window which basically does window.open). The glitch happens only in the popout. Only in Firefox.

Moreover this happens only the first time I open the popout after a page refresh and not on subsequent popouts.

Here's my usage of the component:

const LOG_TYPES = {
  APP: {label: 'Application Logs', value: 'app'},
  FAILED: {label: 'Failure Logs', value: 'failed'},
};

<ReactSelect
isClearable={false}
isSearchable={false}
width="180px"
value={this.state.logType}
placeholder="Log type"
onChange={this.selectLogType}
options={Object.values(LOG_TYPES)}
/>

react-select version - 3.0.8

It's very tricky to debug this, since Firefox refuses to pause the code in a popout, so I can't inspect the DOM when the dropdown is open. console.log doesn't seem to happen either.

awaiting-author-response issubug-unconfirmed issureviewed

Source

dmt0

Most helpful comment

@dmt0 Could you provide a minimal reproducible example with the usage of react-new-window using CodeSandbox?

Rall3n on 16 Sep 2020

👍2

All 9 comments

Hi @dmt0,

I wanted to check in with this issue and confirm it was still happening with the latest version of Firefox, could you please confirm? Thank you.

bladey on 18 Jun 2020

Hi @bladey, yes, still seeing this with Firefox 77.0.1.

Somewhat relevant: here's the firefox bug that prevents you from debugging this properly:
https://bugzilla.mozilla.org/show_bug.cgi?id=1615355

dmt0 on 18 Jun 2020

Thanks for confirming @dmt0.

bladey on 19 Jun 2020

👍1

At this point I can reproduce it in latest Chrome as well. Unfortunately Chrome doesn't let you pause code that's in a window. Any hotkey press (Fn+F8 on Mac in my case) closes the dropdown.

dmt0 on 16 Sep 2020

@dmt0 Could you provide a minimal reproducible example with the usage of react-new-window using CodeSandbox?

Rall3n on 16 Sep 2020

👍2

Now as I added more components to my popup, I see that they behave the same way. I'm using styled-components. Turns out that as I do something interactive (like open the dropdown of react-select), a new CSS class gets generated and gets added to <head>. The problem is that it gets added to parent window, not the popup, which make it appear unstyled in the popup. So this is definitely not a react-select bug. Closing.

dmt0 on 16 Sep 2020

So I fixed things in my project by using StyleSheetManager component with a target prop. I took a ref of an element within my popup window and passed it to target. Now all dynamically generated styled-component styles get added somewhere in the DOM of the popup.

React-select still creates styles in the parent window though. Is there a mechanism similar to StyleSheetManager that I can use here?

dmt0 on 17 Sep 2020

Greetings @dmt0

I am not sure if it helps any, or how you would work with react-new-window, but first guess would be to try something onMount to copy the styles to the new popup.

Have you tried using the copyStyles prop in your react-new-window?

If that isn't working then you may need to inject the styles that Emotion generates manually as seen here:
Screen Shot 2020-12-04 at 10 38 24 AM

useEffect(function onMountCopyEmotionCss() {
  const styles = document.head.querySelectorAll([data-emotion="css"]);
  // add these styles to the head of the new window
}, [popoutWindowName]);

LocalStorage is shared between windows and tabs so that might be a good storage mechanism.

Very interested to see how this gets resolved for you.

ebonow on 4 Dec 2020

👀1

Greetings,

In an effort to curb the tide of unresolved issues, we will be closing this issue due to inactivity. If you come across any new information or working/not working solutions, please let us know and we can re-open this if necessary.

ebonow on 19 Dec 2020

Was this page helpful?

0 / 5 - 0 ratings