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

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!