Dynamic styles get created in a parent window instead of a popup window

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.

[Rall3n]

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

[ebonow]

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.

1. 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:

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.