Skip to content

Instantly share code, notes, and snippets.

@Rendez

Rendez/downshift-shadow-root.js

Last active October 13, 2023 11:08
Show Gist options
  • Save Rendez/1dd55882e9b850dd3990feefc9d6e177 to your computer and use it in GitHub Desktop.
Save Rendez/1dd55882e9b850dd3990feefc9d6e177 to your computer and use it in GitHub Desktop.
Download ZIP
Rendering Downshift in a ShadowRoot
Raw
downshift-shadow-root.js
// this check is borrowed from react
const isProxySupported =
typeof Proxy === 'function' &&
// https://github.com/facebook/react/issues/12011
!Object.isSealed(new Proxy({}, {}));
function createProxyEnvironment(shadowRoot) {
const doc = shadowRoot.ownerDocument;
const properties = {
document: doc,
addEventListener: doc.addEventListener.bind(shadowRoot),
removeEventListener: doc.removeEventListener.bind(shadowRoot),
};
// check if Proxy is supported because of IE and older Safari versions
if (isProxySupported) {
return new Proxy(shadowRoot, {
get: (_, prop) => properties[prop],
})
}
// fallback for es5-compatible environments (can be removed if it's unnecessary)
return Object.create(shadowRoot, Object.keys(properties).reduce((res, key) => {
res[key] = {
get: () => properties[key],
};
return res;
}, {}));
}
@iLonaKarpova
Copy link

This is not working anymore for version 6.1.12.
TypeError
invalid 'instanceof' operand environment.Node
isOrContainsNode
https://kk674yvm0o.csb.app/node_modules/downshift/dist/downshift.esm.js:69:18
targetWithinDownshift/<
https://kk674yvm0o.csb.app/node_modules/downshift/dist/downshift.esm.js:240:64
targetWithinDownshift
https://kk674yvm0o.csb.app/node_modules/downshift/dist/downshift.esm.js:240:28
onMouseUp
https://kk674yvm0o.csb.app/node_modules/downshift/dist/downshift.esm.js:917:63
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.
This error overlay is powered by react-error-overlay used in create-react-app.

@rgripper
Copy link

rgripper commented Oct 11, 2022 •
edited
Loading

Looks like we need to simply add field Node to properties

// this check is borrowed from react
const isProxySupported =
  typeof Proxy === 'function' &&
  // https://github.com/facebook/react/issues/12011
  !Object.isSealed(new Proxy({}, {}));

function createProxyEnvironment(shadowRoot) {
  const doc = shadowRoot.ownerDocument;
  const properties = {
    document: doc,
    addEventListener: doc.addEventListener.bind(shadowRoot),
    removeEventListener: doc.removeEventListener.bind(shadowRoot),
+   Node
  };
  // check if Proxy is supported because of IE and older Safari versions
  if (isProxySupported) {
    return new Proxy(shadowRoot, {
      get: (_, prop) => properties[prop],
    })
  }
  // fallback for es5-compatible environments (can be removed if it's unnecessary)                                                          
  return Object.create(shadowRoot, Object.keys(properties).reduce((res, key) => {
    res[key] = {
      get: () => properties[key],
    };
    return res;
  }, {}));
}

@silviuaavram
Copy link

Hi! I am preparing a PR to address the updates for environment in downshift v8. downshift-js/downshift#1463

Looking at all the changes and usages for the environment prop, the propType should be more like this:

     environment: PropTypes.shape({
      addEventListener: PropTypes.func.isRequired,
      removeEventListener: PropTypes.func.isRequired,
      document: PropTypes.shape({
        createElement: PropTypes.func.isRequired,
        getElementById: PropTypes.func.isRequired,
        activeElement: PropTypes.any.isRequired,
        body: PropTypes.any.isRequired,
      }).isRequired,
      Node: PropTypes.func.isRequired,
    }),

Can you review the changes and help us fix this properly in v8? Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment