Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

Seeing glitchy UI:

When opening the dropdown: image

When right-clicking: image

I have this component in both a normal browser window and a popout window (created through react-new-window which basically does 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'},

placeholder="Log type"

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.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:9 (2 by maintainers)

github_iconTop GitHub Comments

Rall3ncommented, Sep 16, 2020

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

ebonowcommented, Dec 4, 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.

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Styled-components dynamic CSS is not generated in a new ...
So I see two possible ways I could solve it: I could tell styled-component to somehow talk to the new window, not the...
Read more >
Popups and window methods - The Modern JavaScript Tutorial
The syntax to open a popup is:, name, params) : url: An URL to load into the new window. name: A name...
Read more >
Creating Open Window actions for Popup window
The Popup Open Window action prompts for user input and transfers the data entered to the parent form. The Popup type provides an...
Read more >
How to dynamic set width for popup from current parent view
Hello. After tunning detail view in Model editor i see diffrence sizes in web for each cases. I want to have equal sizes...
Read more >
Window Features - Win32 apps | Microsoft Learn
Use the WS_POPUPWINDOW style to create a pop-up window that has a ... that would have gone to the child window to the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found