Styles are not applied to react-select inside a shadow-DOM component

[pusulurm]

I'm using react-select in my application and it is been working great until I hit this situation.
I have wrapped my react application as a shadow-DOM component to isolate styles from other applications. After this change react-select does not get any styles applied.
As per my analysis, react-select uses emotion library to build dynamic css and these styles are being added to document>head section. Since my application is a Shadow-DOM wrapped application, these external styles are not accessible to react-select.

I can see option to write my custom styles but that is very tidies to write all styles and upgrades will become unmanageable. Please suggest a solution for this case.

[pusulurm]

I've received a suggestion from emotions library group to use a custom container.
emotion-js/emotion#388

Could not achieve this. Any help on this is greatly appreciated.

[afvieira]

I have the same problem. The problem is related to "screen readers" feature.
When I open the menu, it adds a <span> above the dropdown (see the image below).

Also, that <span> has a class name css-bl6clz that doesn't exist (in a shadow-DOM component context) and this results in a strange behavior:

By the way, is there any way to deactivate this feature ("screen readers"), in order to not render this kind of dynamically html?

[afvieira]

I've received a suggestion from emotions library group to use a custom container.
emotion-js/emotion#388

Could not achieve this. Any help on this is greatly appreciated.

@pusulurm did you manage to solve this any other way?

[norama]

@afvieira @pusulurm I have managed to solve this with a little workaround:

import React from 'react';
import createCache from '@emotion/cache';
import { NonceProvider } from 'react-select';

import AsyncCreatableSelect from 'react-select/async-creatable';

class MyNonceProvider extends NonceProvider {
    createEmotionCache = (nonce) => {
        return createCache({ nonce, container: this.props.container });
    };
}

const MySelect = () => {
   return (
      <MyNonceProvider container={shadowRootNode}>
            <AsyncCreatableSelect
                ...
            />
      </MyNonceProvider>
   );
};

It would be nice to add this container parameter to NonceProvider.createEmotionCache() in the next release.

[wenisy]

same question here, I used it in Iframe, but when I click selector, it would add styles in parent window head.

[pusulurm]

I've received a suggestion from emotions library group to use a custom container.
emotion-js/emotion#388
Could not achieve this. Any help on this is greatly appreciated.

@pusulurm did you manage to solve this any other way?

@afvieira , As I was in urgency , I ended up downgrading react select to 1.x version. This comes with a css file and I could bundle with my main css file.
Since my bundle css is scoped under shadow DOM it solved my problem. But I had to loose all latest features of react-select.

@norama
Thank you for sharing your solution. I'm glad you have some working solution.
I tried this approach and I have an issue and hope you can suggest on this.
With my own NonceProvider, I am able to get the style sections injected in my webcomponent and react select works fine with it. But I could see duplicate style sections added every time I render react select component. Where I have 10 select elements, the styles are duplicated 10 time.

Is there a way to avoid this flood of style tags from emotion ? Thanks again

[bonzoSPb]

@afvieira @pusulurm I have managed to solve this with a little workaround:

import React from 'react';
import createCache from '@emotion/cache';
import { NonceProvider } from 'react-select';

import AsyncCreatableSelect from 'react-select/async-creatable';

class MyNonceProvider extends NonceProvider {
    createEmotionCache = (nonce) => {
        return createCache({ nonce, container: this.props.container });
    };
}

const MySelect = () => {
   return (
      <MyNonceProvider container={shadowRootNode}>
            <AsyncCreatableSelect
                ...
            />
      </MyNonceProvider>
   );
};

It would be nice to add this container parameter to NonceProvider.createEmotionCache() in the next release.

didnt work ontouch on mobile
it looks like onInputBlur works instantly after touch to Control
but it works if touch on Indicator
@JedWatson plz help

import React, { Component } from 'react';
import createCache from '@emotion/cache';
import Select, { NonceProvider } from 'react-select';
import memoizeOne from 'memoize-one';

class MyNonceProvider extends NonceProvider {
  createEmotionCacheCustom = function (nonce) {
    return createCache({ nonce, key: 'custom-select-style', container: this.props.container });
  };

  createEmotionCache = memoizeOne(this.createEmotionCacheCustom);
}

export default class CustomSelect extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    const shadowRootNode = document.getElementsByTagName('online-widget-osago')[0].shadowRoot.getElementById('osago-widget');
    return (
      <MyNonceProvider container={shadowRootNode}>
        <Select
          {...this.props}
        />
      </MyNonceProvider>
    );
  }
}```

[bonzoSPb]

@JedWatson
we add additional check and now it works
Can you update your package?

    _this.onTouchEnd = function (event) {
      if (_this.userIsDragging) return; // close the menu if the user taps outside
      // we're checking on event.target here instead of event.currentTarget, because we want to assert information
      // on events on child elements, not the document (which we've attached this handler to).
 
      if ((_this.controlRef && !_this.controlRef.contains(event.target) && _this.menuListRef && !_this.menuListRef.contains(event.target)) &&
      (_this.controlRef && !_this.controlRef.contains(event.composedPath()[0]) && _this.menuListRef && !_this.menuListRef.contains(event.composedPath()[0]))) {
        _this.blurInput();
      } // reset move vars
 
 
      _this.initialTouchX = 0;
      _this.initialTouchY = 0;
    };`

[startupbuilders777]

please update jet. thanks

[ErikAGriffin]

I'm having an issue where React-Select seems to not be working at all inside the shadow DOM. Focusing the element, onChange, nothing seems to be working properly. Everyone else's issue is just that the styles aren't being applied?

So for anyone using React-Select inside a ShadowDOM, and having issues where events aren't firing:

I was able to add the following indented lines from the code snippet below to where I attach my React component to the page and have events work again. This is being done from within a Chrome Extension, other browsers may behave differently.

Object.defineProperty(reactRoot, 'ownerDocument', { value: shadowRoot });
shadowRoot.createElement = (...args) => document.createElement(...args);
shadowRoot.createElementNS = (...args) => document.createElementNS(...args);
shadowRoot.createTextNode = (...args) => document.createTextNode(...args);

where reactRoot is the element inside the ShadowDOM you are mounting your React component to using ReactDOM.render(...) and shadowRoot is the ShadowRoot.

facebook/react#9242 (comment)

[n3bhmb]

@bonzoSPb
Hi, where did you add that additionnal check ? In which file ?

[bonzoSPb]

@bonzoSPb
Hi, where did you add that additionnal check ? In which file ?

In Select.js, check my fork
https://github.com/bonzoSPb/react-select/blob/master/src/Select.js

[n3bhmb]

@bonzoSPb
Hi, where did you add that additionnal check ? In which file ?

In Select.js, check my fork
https://github.com/bonzoSPb/react-select/blob/master/src/Select.js

Thank you @bonzoSPb ! 👍 It works great with a shadow DOM ! 💯

@JedWatson Can you please consider the solution of @bonzoSPb ?

[mikeyyyzhao]

I'm running react-select in an iframe and getting the same styling bug as @afvieira where the screen reader gets displayed. I've tried running the code that @bonzoSPb and @norama have posted but the styling is still off. I tried console logging the nonce and seeing that it's returning null, could that be an issue?

import React, { Component } from 'react';
import createCache from '@emotion/cache';
import Select, { NonceProvider } from 'react-select';

class MyNonceProvider extends NonceProvider {
  createEmotionCache = (nonce) => {
    console.log('nonce', nonce);
    return createCache({ nonce, container: this.props.container });
  };
}

export default class MySelect extends Component {
  render() {
    let iframeContainer = document.getElementById('custom-iframe-container');

    return (
      <MyNonceProvider container={iframeContainer}>
        <Select
          {...this.props}
        />
      </MyNonceProvider>
    );
  }
};

[ebonow]

@mikeyyyzhao Would you kindly mind creating a codesandbox demonstrating this issue? It would be much easier to get eyes on this and get this pushed up in priority.

[mikeyyyzhao]

@ebonow sure thing, here's the codesandbox. As you can see, react-select is showing the screen reader text and style is incorrect. Thanks in advance for your help!

[ebonow]

I'll try to review this and get back to you soon. I'm still fairly new at this CSS-in-JS / Emotion thing, but I'll see what I can find out as I do know this is affecting others.

[kopecmi8]

@JedWatson First of all thank you for great librarary!

Please consider on @bonzoSPb solution. There is two separate problems when yours library is used in Shadow DOM.

1. Problem with missing styles
2. Problem on mobile devices with touch screen

First problem can be easily fixed by adding custom NonceProvider and its not so annoying to fix it on users own.

The second is much worse. It cannot be fixed without modification of library code and its lead to dirty hacks when you need to use it.

Thanks for your interest in.

[carlosribas]

This is an amazing library, but I am facing the same problem that @mikeyyyzhao described. I hope @ebonow finds a solution for that.

[ebonow]

Thanks for the ping @carlosribas .

I'm currently working on a PR for customized aria-live messages. While working on this, it occurred to me that a11yText should perhaps be its own component. Advantages of this includes:

• Customizable text with access to more props and state
• Separation of concerns from aria messaging and Select.js
• Add additional aria-live messaging without relying on prebaked implementation patterns/templates
• Ability to remove all aria-live messaging to give priority to other aria attributes
• Ability to apply style to the shadowDOM should the user want an unstyled Select or one that isn't reliant on Emotion

Regarding @bonzoSPb , I agree that we should add a composedPath check, though we'd likely want to do a null guard check. One improvement upon this bit of code though, would be a check inside the entire Menu and not just the menuListRef should incase someone want to add a Header or Footer to their MenuList. There's an existing issue logged for this, so was hoping to take it on in one go.

[carlosribas]

Sounds good. I'm really looking forward to this PR. Thank you @ebonow.

[sag1v]

With my own NonceProvider, I am able to get the style sections injected in my webcomponent and react select works fine with it. But I could see duplicate style sections added every time I render react select component. Where I have 10 select elements, the styles are duplicated 10 time.

Is there a way to avoid this flood of style tags from emotion ? Thanks again

@pusulurm / @norama

Did you manage to stop the duplication flood? I'm facing the same issue when implementing @norama solution or even by creating my own NonceProvider from scratch.

[erkez]

I had this issue with styles when some of my application components were inserted into a shadow root.

I followed some of the suggestions here to simply use the emotion CacheProvider with a different container.

import * as React from 'react';

import { CacheProvider } from '@emotion/core';
import createCache, { EmotionCache } from '@emotion/cache';

type Props = {
    stylesRoot?: HTMLElement;
    children: React.ReactNode;
};

export default function EmotionStyleSheetProvider(props: Props): React.ReactElement {
    const [cache, setCache] = React.useState<EmotionCache | null>(null);

    React.useEffect(() => {
        setCache(createCache({ container: props.stylesRoot }));
    }, [props.stylesRoot]);

    return (
        <React.Fragment>
            {cache != null && <CacheProvider value={cache}>{props.children}</CacheProvider>}
        </React.Fragment>
    );
}

In your application root, you could simply get the ref for a base div and pass it to a component similar to the one above. This actually managed to also solve issue #3309 for me.

Hope this helps.

[ptgamr]

@erkez solution works for us for a while.. but after this PR!2361 of @emotion/cache, to fix a bug, make the solution no longer works..

Basically, the bug is that @emotions/cache modifies style tags 'belonging' to other cacheProviders... in this case, react-select has its own style provider (NonceProvider: https://github.com/JedWatson/react-select/blob/master/packages/react-select/src/NonceProvider.tsx)

<OurCustomerStyleProvider>
  <NonceProvider>
      ..........
  </NoneProvider>
</OurCustomerStyleProvider>

Because of the bug, NoneProvider will modify style tags belong to parent provider. (which is ours)

"The bug".. in this case, actually helping us... but it's now fixed, which mean we have to find another way.

[AndrewKuktenko]

Any solution here?

[myorkgitis]

Any solution here?

Not sure if you're using SSR or next.js but I was able to get the styles to inject in production by hiding a <Select> component in my _app.tsx, outside of the page Component.

My solution is here: #3309 (comment)

[Rall3n]

@jfinnis,

The behavior you are showing against a person you don't know and never met before is highly unacceptable.

We have reported your abusive/harassing behavior.

[Rall3n]

That being said:

I tested around a bit and got an example working.
https://codesandbox.io/s/react-select-in-custom-element-ohlj0

The correct way to insert the styles into the shadow DOM is to use the CacheProvider component from @emotion/react in combination with a custom cache object created by createCache from @emotion/cache with the shadow root as its container attribute. Last but not least, the Select component is rendered as a child of CacheProvider that uses the created cache as its value prop.

// Create shadow and mounting point
class XSelect extends HTMLElement {
  connectedCallback() {
    this.somehowCreateShadowAndMountPoint();
    
    const cache = createCache({
      container: this.shadowRoot,
      key: 'customElementCache'
    });
    
    ReactDOM.render(
      <CacheProvider value={cache}>
        <Select {...} />
      </CacheProvider>,
      this.mountPoint
    );
  }
}

It is important that the container attribute of the cache and the target element for ReactDOM.render must be different elements. If they are identical, there may be a race-condition between emotion-js, which tries to insert its stylesheets, and react, which tries to render the component, with the latter winning.

[jfinnis]

Thanks for taking the time to take a look. I tried the demo and it does fix the issue of css not being inserted into the shadow DOM. But I can't seem to get it to work on mobile, when I open up this demo in Chrome DevTools in mobile mode, I can't select the dropdown at all. I'm guessing it's an interaction between mobile browsers and web components (unless I'm missing something simple) since I've been able to use this successfully with iframe versions of my embedded software.

(Also, I apologize for negative comments the other day, I was not feeling well and took out frustrations among people who do not deserve that at all. I highly appreciate the work that goes into maintaining open source software and respect all the contributors. Thank you for responding to negativity with positiveness and spending time trying to help, that's very classy behavior.)

[jongbelegen]

@jfinnis, try the patch of @bonzoSPb, this works for me.

[jfinnis]

@jfinnis, try the patch of @bonzoSPb, this works for me.

Thanks for pointing this out, this worked for me as well! This patch allows me to use the select dropdown on mobile: #3680 (comment)

[Rall3n]

I will close this issue now as the main problem has been addressed and a solution has been presented.

[baramik]

Was there any chance to apply the changes to make it work on mobile?

[CezaryDanielNowak]

Solutions here are pretty vague and troublesome. IMHO styles should be applied to the react root element, not to the page head by default.

[irhamputra]

IMHO it would be good that styles also should be provided in separated file, so people can add it manually where in their project

[forsureitsme]

So... won't fix and we'll have to add another dependency to our projects. Got it.

[DmitryMasley]

From my understanding, we could use NonceProvider. We only need to add a container prop to it in order to overwrite the default insertion point. This way we could avoid extra dependency for @emotion/cache and @emotion/react and would mitigate the risk that select uses a different version of those packages.