Merge branch 'master' into unskip-autofocus-unit-tests

JedWatson · Mar 19, 2021 · 18e1866 · 18e1866
2 parents 8cae77f + f3c0bb5
commit 18e1866
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 24 deletions.
diff --git a/.changeset/dirty-laws-trade.md b/.changeset/dirty-laws-trade.md
@@ -0,0 +1,5 @@
+---
+"react-select": minor
+---
+
+Now pass the focusedOption to the MenuList Component as a prop
diff --git a/.changeset/fair-panthers-marry.md b/.changeset/fair-panthers-marry.md
@@ -0,0 +1,5 @@
+---
+"react-select": patch
+---
+
+The Menu bottom is no longer scrolled into view when menuShouldScrollIntoView=false
diff --git a/docs/App/Header.js b/docs/App/Header.js
@@ -106,24 +106,17 @@ const Container = props => (
 );
 
 type HeaderProps = RouterProps & { children: Node };
-type HeaderState = { contentHeight: 'auto' | number, stars: number };
+type HeaderState = { stars: number };
 
 const apiUrl = 'https://api.github.com/repos/jedwatson/react-select';
 
 class Header extends Component<HeaderProps, HeaderState> {
   nav: HTMLElement;
   content: HTMLElement;
-  state = { contentHeight: 'auto', stars: 0 };
+  state = { stars: 0 };
   componentDidMount() {
     this.getStarCount();
   }
-  UNSAFE_componentWillReceiveProps({ location }: HeaderProps) {
-    const valid = ['/', '/home'];
-    const shouldCollapse = !valid.includes(this.props.location.pathname);
-    if (location.pathname !== this.props.location.pathname && shouldCollapse) {
-      this.toggleCollapse();
-    }
-  }
   getStarCount = () => {
     fetch(apiUrl)
       .then(res => res.json())
@@ -139,25 +132,28 @@ class Header extends Component<HeaderProps, HeaderState> {
     const valid = ['/', '/home'];
     return valid.includes(props.location.pathname);
   };
-  toggleCollapse = () => {
-    const contentHeight = this.content.scrollHeight;
-    this.setState({ contentHeight });
-  };
-  getContent = ref => {
+  setContentRef = ref => {
     if (!ref) return;
     this.content = ref;
   };
+  getContentHeight = () => {
+    if (!this.content) {
+      return 'auto';
+    }
+
+    return this.content.scrollHeight;
+  };
   render() {
     const { children, history } = this.props;
-    const { contentHeight, stars } = this.state;
+    const { stars } = this.state;
 
     return (
       <Gradient>
         {children}
         <Collapse
           isCollapsed={!this.isHome()}
-          height={contentHeight}
-          innerRef={this.getContent}
+          height={this.getContentHeight()}
+          innerRef={this.setContentRef}
         >
           <Container>
             <h1

diff --git a/docs/pages/components/index.js b/docs/pages/components/index.js
@@ -341,7 +341,7 @@ export default function Components() {
 
         ### LoadingIndicator
 
-        Loading indicator to be displayed in the Indicators Container when \`isLoading]\`
+        Loading indicator to be displayed in the Indicators Container when \`isLoading\`
         is true. By default it is three dots.
 
         See [props docs](/props#loadingindicator) for more details

diff --git a/packages/react-select/CHANGELOG.md b/packages/react-select/CHANGELOG.md
@@ -1,5 +1,11 @@
 # react-select
 
+## 4.2.1
+
+### Patch Changes
+
+- [ca3c41bb](https://github.com/JedWatson/react-select/commit/ca3c41bb55e2666589bbbb69d1153357191d07a4) [#4478](https://github.com/JedWatson/react-select/pull/4478) Thanks [@ebonow](https://github.com/ebonow)! - Check passive events polyfill for the existence of window for SSR
+
 ## 4.2.0
 
 ### Minor Changes

diff --git a/packages/react-select/package.json b/packages/react-select/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-select",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "description": "A Select control built with and for ReactJS",
   "main": "dist/react-select.cjs.js",
   "module": "dist/react-select.esm.js",

diff --git a/packages/react-select/src/Select.js b/packages/react-select/src/Select.js
@@ -1725,6 +1725,7 @@ export default class Select extends Component<Props, State> {
                   }}
                   isLoading={isLoading}
                   maxHeight={maxHeight}
+                  focusedOption={focusedOption}
                 >
                   {menuUI}
                 </MenuList>

diff --git a/packages/react-select/src/components/Menu.js b/packages/react-select/src/components/Menu.js
@@ -23,6 +23,7 @@ import type {
   MenuPlacement,
   MenuPosition,
   CommonProps,
+  OptionType,
 } from '../types';
 import type { Theme } from '../types';
 
@@ -145,7 +146,9 @@ export function getMenuPlacement({
 
       // BOTTOM: allow browser to increase scrollable area and immediately set scroll
       if (placement === 'bottom') {
-        scrollTo(scrollParent, scrollDown);
+        if (shouldScroll) {
+          scrollTo(scrollParent, scrollDown);
+        }
         return { placement: 'bottom', maxHeight };
       }
       break;
@@ -350,6 +353,8 @@ export type MenuListProps = {
   children: Node,
   /** Inner ref to DOM Node */
   innerRef: InnerRef,
+  /** The currently focused option */
+  focusedOption: OptionType,
   /** Props to be passed to the menu-list wrapper. */
   innerProps: {},
 };

diff --git a/packages/react-select/src/utils.js b/packages/react-select/src/utils.js
@@ -306,10 +306,11 @@ const options = {
     return (passiveOptionAccessed = true);
   },
 };
-
-if (document.addEventListener && document.removeEventListener) {
-  document.addEventListener('p', noop, options);
-  document.removeEventListener('p', noop, false);
+// check for SSR
+const w = typeof window !== 'undefined' ? window : {};
+if (w.addEventListener && w.removeEventListener) {
+  w.addEventListener('p', noop, options);
+  w.removeEventListener('p', noop, false);
 }
 
 export const supportsPassiveEvents: boolean = passiveOptionAccessed;