From e2766e2c7916b03be8d5bf832039e545ca1cebd7 Mon Sep 17 00:00:00 2001 From: Quentin Benyahia Date: Wed, 26 Jul 2023 16:21:47 +0200 Subject: [PATCH 1/3] Try ot fix some shadow dom issue --- public/index-rollup.html | 2 +- src/App.tsx | 27 +-- src/components/Tooltip/Tooltip.tsx | 64 +++++++- .../TooltipController/TooltipController.tsx | 154 +++++++++--------- src/index-dev.tsx | 2 +- 5 files changed, 150 insertions(+), 99 deletions(-) diff --git a/public/index-rollup.html b/public/index-rollup.html index 4079e8f93..077f6190a 100644 --- a/public/index-rollup.html +++ b/public/index-rollup.html @@ -7,7 +7,7 @@ Dev - React Tooltip - + diff --git a/src/App.tsx b/src/App.tsx index fd85b9adf..85c558f5d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -33,25 +33,30 @@ function App() { > My button - + Check the dev console console.log('After show')} // eslint-disable-next-line no-console @@ -158,7 +163,7 @@ function App() { console.log('After show with click')} // eslint-disable-next-line no-console @@ -170,7 +175,7 @@ function App() { console.log('After show with delay')} // eslint-disable-next-line no-console @@ -202,7 +207,7 @@ function App() { @@ -231,7 +236,7 @@ function App() { (null) + + // State / Ref for Shadow DOM stuff + const [isShadowChecked, setIsShadowChecked] = useState(false) + const [isShadowDom, setIsShadowDom] = useState(false) + const shadowCheckRef = useRef(null) + const [root, setRoot] = useState(document) /** * @todo Remove this in a future version (provider/wrapper method is deprecated) */ @@ -68,6 +75,38 @@ const Tooltip = ({ const shouldOpenOnClick = openOnClick || events.includes('click') + // Set the Root to either ShadowDom or leave it as Document + useEffect(() => { + if (!isShadowChecked && shadowCheckRef.current) { + setIsShadowChecked(true) + setIsShadowDom(shadowCheckRef.current.getRootNode() instanceof ShadowRoot) + setRoot(shadowCheckRef.current.getRootNode() as ShadowRoot) + } + }, [isShadowChecked, shadowCheckRef]) + + // If isShadowDom update to true, set the inline CSS to the shadow DOM + useEffect(() => { + if (typeof window !== 'undefined') { + if (isShadowDom && !document.getElementById('react-tooltip-styles')) { + const externalStylesheet = document.getElementById('style-rt') + const hrefCss = externalStylesheet!.getAttribute('href')! + + // Fetch the CSS file, should be easier tbh but this works + fetch(hrefCss) + .then((response) => response.text()) + .then((cssContent) => { + const styleElement = document.createElement('style') + styleElement.textContent = cssContent + + // Add the new