Rendering Downshift in a ShadowRoot

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;
  }, {}));
}

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.

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;
  }, {}));
}

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!