From 08aac4c1875e29c1af74e4f6c0d69fc0d1e183ce Mon Sep 17 00:00:00 2001 From: Sunny Li Date: Wed, 16 Jan 2019 17:32:55 -0500 Subject: [PATCH 01/11] Pass focusedOption to the MenuList. This is useful for handling scrolling when overridng MenuList with a virtualized list from react-virtualized --- src/Select.js | 5 +++-- src/components/Menu.js | 2 ++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/Select.js b/src/Select.js index 534a041ef6..9319e0a75c 100644 --- a/src/Select.js +++ b/src/Select.js @@ -1453,7 +1453,7 @@ export default class Select extends Component { if (isMulti) { const selectValues: Array = selectValue.map(opt => { - let isFocused = opt === focusedValue; + const isOptionFocused = opt === focusedValue; return ( { Label: MultiValueLabel, Remove: MultiValueRemove, }} - isFocused={isFocused} + isFocused={isOptionFocused} isDisabled={isDisabled} key={this.getOptionValue(opt)} removeProps={{ @@ -1698,6 +1698,7 @@ export default class Select extends Component { innerRef={this.getMenuListRef} isLoading={isLoading} maxHeight={maxHeight} + focusedOption={focusedOption} > {menuUI} diff --git a/src/components/Menu.js b/src/components/Menu.js index 5ea1b6259f..875c32d5cc 100644 --- a/src/components/Menu.js +++ b/src/components/Menu.js @@ -22,6 +22,7 @@ import type { MenuPlacement, MenuPosition, CommonProps, + OptionType } from '../types'; import type { Theme } from '../types'; @@ -342,6 +343,7 @@ export type MenuListProps = { children: Node, /** Inner ref to DOM Node */ innerRef: InnerRef, + focusedOption: OptionType }; export type MenuListComponentProps = CommonProps & MenuListProps & From f2412a43515692c5a86f1fcffd3eef3718684988 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 10 Dec 2018 11:29:35 +0100 Subject: [PATCH 02/11] fixed issue there menu scrolls into view even though menuShouldScrollIntoView is false, happens when parent container is a scrollable div further down the page. The bug casues the menu bottom to be scrolled into view so that the select input/search is not visible --- packages/react-select/src/components/Menu.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-select/src/components/Menu.js b/packages/react-select/src/components/Menu.js index 2777297ef4..33fca1686e 100644 --- a/packages/react-select/src/components/Menu.js +++ b/packages/react-select/src/components/Menu.js @@ -145,7 +145,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; From fff94e7c5f4231b141a31af9d894a67edd714aa9 Mon Sep 17 00:00:00 2001 From: Manvydas Date: Sat, 26 Dec 2020 21:56:01 +0200 Subject: [PATCH 03/11] 4094 remove UNSAFE method from docs (Header.js) --- docs/App/Header.js | 30 +++++++++++++----------------- 1 file changed, 13 insertions(+), 17 deletions(-) diff --git a/docs/App/Header.js b/docs/App/Header.js index 303710ed16..a055c3c824 100644 --- 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 { 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 { 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 ( {children}

Date: Tue, 16 Feb 2021 08:15:53 +0200 Subject: [PATCH 04/11] Fix typo in `docs/pages/components` --- docs/pages/components/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/components/index.js b/docs/pages/components/index.js index 22eebe5a8f..cdc8a5b2f2 100644 --- 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 From ed8b85f3b78b0230d2b1bc8a0f189eae91c11216 Mon Sep 17 00:00:00 2001 From: Eric Bonow Date: Fri, 5 Mar 2021 09:06:13 -0600 Subject: [PATCH 05/11] Ensure window exists in passive events pollyfill --- packages/react-select/src/utils.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/react-select/src/utils.js b/packages/react-select/src/utils.js index 4a74c837b2..4564866a02 100644 --- 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; From ca3c41bb55e2666589bbbb69d1153357191d07a4 Mon Sep 17 00:00:00 2001 From: Eric Bonow Date: Fri, 5 Mar 2021 09:40:01 -0600 Subject: [PATCH 06/11] Adding changeset --- .changeset/plenty-keys-agree.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/plenty-keys-agree.md diff --git a/.changeset/plenty-keys-agree.md b/.changeset/plenty-keys-agree.md new file mode 100644 index 0000000000..3938c9436c --- /dev/null +++ b/.changeset/plenty-keys-agree.md @@ -0,0 +1,5 @@ +--- +'react-select': patch +--- + +Check passive events polyfill for the existence of window for SSR From 3ae57af8d7b668708639201d69187901e766a91b Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 5 Mar 2021 15:59:14 +0000 Subject: [PATCH 07/11] Version Packages --- .changeset/plenty-keys-agree.md | 5 ----- packages/react-select/CHANGELOG.md | 6 ++++++ packages/react-select/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/plenty-keys-agree.md diff --git a/.changeset/plenty-keys-agree.md b/.changeset/plenty-keys-agree.md deleted file mode 100644 index 3938c9436c..0000000000 --- a/.changeset/plenty-keys-agree.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'react-select': patch ---- - -Check passive events polyfill for the existence of window for SSR diff --git a/packages/react-select/CHANGELOG.md b/packages/react-select/CHANGELOG.md index fc11c76e2f..89f3e5dcdb 100644 --- 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 index dbc1615bfe..d981c9c12b 100644 --- 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", From 6a79efcd91d8e6cb16d66e58082b03e77bdd661f Mon Sep 17 00:00:00 2001 From: Eric Bonow Date: Fri, 5 Mar 2021 11:07:07 -0600 Subject: [PATCH 08/11] Update header.js to use emotion/react jsx render method Update header.js to use emotion/react jsx render method --- docs/App/Header.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/App/Header.js b/docs/App/Header.js index a055c3c824..de52bd8a93 100644 --- a/docs/App/Header.js +++ b/docs/App/Header.js @@ -2,7 +2,7 @@ /** @jsx jsx */ import fetch from 'unfetch'; import { Component, type Node } from 'react'; -import { jsx } from '@emotion/core'; +import { jsx } from '@emotion/react'; import { withRouter } from 'react-router-dom'; import Select from 'react-select'; From 6bd0001dda5f7021457dd625ad2e05d2b45dbfd4 Mon Sep 17 00:00:00 2001 From: Eric Bonow Date: Sun, 7 Mar 2021 19:54:56 -0600 Subject: [PATCH 09/11] use Prettier Updated file with prettier formatting --- docs/App/Header.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/App/Header.js b/docs/App/Header.js index de52bd8a93..a729cd6d04 100644 --- a/docs/App/Header.js +++ b/docs/App/Header.js @@ -142,7 +142,7 @@ class Header extends Component { } return this.content.scrollHeight; - } + }; render() { const { children, history } = this.props; const { stars } = this.state; From 7a414a7c7a1f8e2902e43bd476e3db17a8dce049 Mon Sep 17 00:00:00 2001 From: Jed Watson Date: Fri, 19 Mar 2021 10:08:02 +1100 Subject: [PATCH 10/11] Add changeset --- .changeset/fair-panthers-marry.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fair-panthers-marry.md diff --git a/.changeset/fair-panthers-marry.md b/.changeset/fair-panthers-marry.md new file mode 100644 index 0000000000..3a2fa9c028 --- /dev/null +++ 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 From 035294f457921423c9237861f7c73584bdecbcc4 Mon Sep 17 00:00:00 2001 From: Jed Watson Date: Fri, 19 Mar 2021 10:23:38 +1100 Subject: [PATCH 11/11] Add changeset --- .changeset/dirty-laws-trade.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/dirty-laws-trade.md diff --git a/.changeset/dirty-laws-trade.md b/.changeset/dirty-laws-trade.md new file mode 100644 index 0000000000..1bb710773e --- /dev/null +++ b/.changeset/dirty-laws-trade.md @@ -0,0 +1,5 @@ +--- +"react-select": minor +--- + +Now pass the focusedOption to the MenuList Component as a prop