Merge branch 'master' into feature-suppressRefError

Author: yp

.all-contributorsrc

@@ -381,6 +381,44 @@
         "code",
         "test"
       ]
+    },
+    {
+      "login": "ifyoumakeit",
+      "name": "Dave Garwacke",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/3998604?v=4",
+      "profile": "http://www.warbyparker.com",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "Drapegnik",
+      "name": "Ivan Pazhitnykh",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/11758660?v=4",
+      "profile": "http://linkedin.com/in/drapegnik",
+      "contributions": [
+        "code",
+        "test"
+      ]
+    },
+    {
+      "login": "Rendez",
+      "name": "Luis Merino",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/61776?v=4",
+      "profile": "https://github.com/Rendez",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "arahansen",
+      "name": "Andrew Hansen",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/8746094?v=4",
+      "profile": "http://twitter.com/arahansen",
+      "contributions": [
+        "code",
+        "test"
+      ]
     }
   ]
 }

README.md

@@ -17,7 +17,7 @@ autocomplete/dropdown/select/combobox components</p>
 [![version][version-badge]][package]
 [![MIT License][license-badge]][LICENSE]
 
-[![All Contributors](https://img.shields.io/badge/all_contributors-39-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-43-orange.svg?style=flat-square)](#contributors)
 [![PRs Welcome][prs-badge]][prs]
 [![Chat][chat-badge]][chat]
 [![Code of Conduct][coc-badge]][coc]
@@ -85,8 +85,8 @@ npm install --save downshift
 > have those installed as well.
 
 > Note also this library supports `preact` out of the box. If you are using
-> `preact` then look in the `dist/` folder and use the module you want with the
-> `preact` suffix.
+> `preact` then use the corresponding module in the `preact/dist` folder.
+> You can even `import Downshift from 'downshift/preact'` 👍
 
 ## Usage
 
@@ -182,6 +182,13 @@ This is the initial `isOpen` value.
 Used to determine the string value for the selected item (which is used to
 compute the `inputValue`.
 
+### selectedItemChanged
+
+> `function(prevItem: any, item: any)` | defaults to: `(prevItem, item) => (prevItem !== item)`
+
+Used to determine if the new `selectedItem` has changed compared to the
+previous `selectedItem` and properly update Downshift's internal state.
+
 ### getA11yStatusMessage
 
 > `function({/* see below */})` | default messages provided in English
@@ -250,7 +257,7 @@ but differ slightly.
 
 - `changes`: These are the properties that actually have changed since the last
   state change.
-- `stateAndHelpers`: This is the exact same thing you're `children` prop
+- `stateAndHelpers`: This is the exact same thing your `children` prop
   function is called with (see [Child Callback Function](#child-callback-function))
 
 > Tip: This function will be called any time _any_ state is changed. The best
@@ -660,7 +667,8 @@ Thanks goes to these people ([emoji key][emojis]):
 | [<img src="https://avatars1.githubusercontent.com/u/7330124?v=4" width="100px;"/><br /><sub>Geoff Davis</sub>](https://geoffdavis.info)<br />[💡](#example-geoffdavis92 "Examples") | [<img src="https://avatars0.githubusercontent.com/u/3415488?v=4" width="100px;"/><br /><sub>Anup</sub>](https://github.com/reznord)<br />[📖](https://github.com/paypal/downshift/commits?author=reznord "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/340520?v=4" width="100px;"/><br /><sub>Ferdinand Salis</sub>](http://ferdinandsalis.com)<br />[🐛](https://github.com/paypal/downshift/issues?q=author%3Aferdinandsalis "Bug reports") [💻](https://github.com/paypal/downshift/commits?author=ferdinandsalis "Code") | [<img src="https://avatars2.githubusercontent.com/u/662750?v=4" width="100px;"/><br /><sub>Kye Hohenberger</sub>](https://github.com/tkh44)<br />[🐛](https://github.com/paypal/downshift/issues?q=author%3Atkh44 "Bug reports") | [<img src="https://avatars0.githubusercontent.com/u/1443499?v=4" width="100px;"/><br /><sub>Julien Goux</sub>](https://github.com/jgoux)<br />[🐛](https://github.com/paypal/downshift/issues?q=author%3Ajgoux "Bug reports") [💻](https://github.com/paypal/downshift/commits?author=jgoux "Code") [⚠️](https://github.com/paypal/downshift/commits?author=jgoux "Tests") | [<img src="https://avatars2.githubusercontent.com/u/9586897?v=4" width="100px;"/><br /><sub>Joachim Seminck</sub>](https://github.com/jseminck)<br />[💻](https://github.com/paypal/downshift/commits?author=jseminck "Code") | [<img src="https://avatars3.githubusercontent.com/u/954596?v=4" width="100px;"/><br /><sub>Jesse Harlin</sub>](http://jesseharlin.net/)<br />[🐛](https://github.com/paypal/downshift/issues?q=author%3Athe-simian "Bug reports") [💡](#example-the-simian "Examples") |
 | [<img src="https://avatars0.githubusercontent.com/u/1402095?v=4" width="100px;"/><br /><sub>Matt Parrish</sub>](https://github.com/pbomb)<br />[🔧](#tool-pbomb "Tools") [👀](#review-pbomb "Reviewed Pull Requests") | [<img src="https://avatars1.githubusercontent.com/u/11661846?v=4" width="100px;"/><br /><sub>thom</sub>](http://thom.kr)<br />[💻](https://github.com/paypal/downshift/commits?author=thomhos "Code") | [<img src="https://avatars2.githubusercontent.com/u/1088312?v=4" width="100px;"/><br /><sub>Vu Tran</sub>](http://twitter.com/tranvu)<br />[💻](https://github.com/paypal/downshift/commits?author=vutran "Code") | [<img src="https://avatars1.githubusercontent.com/u/74193?v=4" width="100px;"/><br /><sub>Codie Mullins</sub>](https://github.com/codiemullins)<br />[💻](https://github.com/paypal/downshift/commits?author=codiemullins "Code") [💡](#example-codiemullins "Examples") | [<img src="https://avatars3.githubusercontent.com/u/12202757?v=4" width="100px;"/><br /><sub>Mohammad Rajabifard</sub>](https://morajabi.me)<br />[📖](https://github.com/paypal/downshift/commits?author=morajabi "Documentation") [🤔](#ideas-morajabi "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/9488719?v=4" width="100px;"/><br /><sub>Frank Tan</sub>](https://github.com/tansongyang)<br />[💻](https://github.com/paypal/downshift/commits?author=tansongyang "Code") | [<img src="https://avatars3.githubusercontent.com/u/5093058?v=4" width="100px;"/><br /><sub>Kier Borromeo</sub>](https://kierb.com)<br />[💡](#example-srph "Examples") |
 | [<img src="https://avatars1.githubusercontent.com/u/8969456?v=4" width="100px;"/><br /><sub>Paul Veevers</sub>](https://github.com/paul-veevers)<br />[💻](https://github.com/paypal/downshift/commits?author=paul-veevers "Code") | [<img src="https://avatars2.githubusercontent.com/u/13622298?v=4" width="100px;"/><br /><sub>Ron Cruz</sub>](https://github.com/Ronolibert)<br />[📖](https://github.com/paypal/downshift/commits?author=Ronolibert "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/13605633?v=4" width="100px;"/><br /><sub>Rick McGavin</sub>](http://rickmcgavin.github.io)<br />[📖](https://github.com/paypal/downshift/commits?author=rickMcGavin "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/869669?v=4" width="100px;"/><br /><sub>Jelle Versele</sub>](http://twitter.com/vejersele)<br />[💡](#example-vejersele "Examples") | [<img src="https://avatars1.githubusercontent.com/u/202773?v=4" width="100px;"/><br /><sub>Brent Ertz</sub>](https://github.com/brentertz)<br />[🤔](#ideas-brentertz "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/8015514?v=4" width="100px;"/><br /><sub>Justice Mba </sub>](https://github.com/Dajust)<br />[💻](https://github.com/paypal/downshift/commits?author=Dajust "Code") [📖](https://github.com/paypal/downshift/commits?author=Dajust "Documentation") [🤔](#ideas-Dajust "Ideas, Planning, & Feedback") | [<img src="https://avatars2.githubusercontent.com/u/3925281?v=4" width="100px;"/><br /><sub>Mark Ellis</sub>](http://mfellis.com)<br />[🤔](#ideas-ellismarkf "Ideas, Planning, & Feedback") |
-| [<img src="https://avatars1.githubusercontent.com/u/3241922?v=4" width="100px;"/><br /><sub>us͡an̸df͘rien͜ds͠</sub>](http://ronak.io/)<br />[🐛](https://github.com/paypal/downshift/issues?q=author%3Ausandfriends "Bug reports") [💻](https://github.com/paypal/downshift/commits?author=usandfriends "Code") [⚠️](https://github.com/paypal/downshift/commits?author=usandfriends "Tests") | [<img src="https://avatars0.githubusercontent.com/u/474248?v=4" width="100px;"/><br /><sub>Robin Drexler</sub>](https://www.robin-drexler.com/)<br />[🐛](https://github.com/paypal/downshift/issues?q=author%3Arobin-drexler "Bug reports") [💻](https://github.com/paypal/downshift/commits?author=robin-drexler "Code") | [<img src="https://avatars0.githubusercontent.com/u/7406639?v=4" width="100px;"/><br /><sub>Arturo Romero</sub>](http://arturoromero.info/)<br />[💡](#example-arturoromeroslc "Examples") | [<img src="https://avatars1.githubusercontent.com/u/275483?v=4" width="100px;"/><br /><sub>yp</sub>](http://algolab.eu/pirola)<br />[🐛](https://github.com/paypal/downshift/issues?q=author%3Ayp "Bug reports") [💻](https://github.com/paypal/downshift/commits?author=yp "Code") [⚠️](https://github.com/paypal/downshift/commits?author=yp "Tests") |
+| [<img src="https://avatars1.githubusercontent.com/u/3241922?v=4" width="100px;"/><br /><sub>us͡an̸df͘rien͜ds͠</sub>](http://ronak.io/)<br />[🐛](https://github.com/paypal/downshift/issues?q=author%3Ausandfriends "Bug reports") [💻](https://github.com/paypal/downshift/commits?author=usandfriends "Code") [⚠️](https://github.com/paypal/downshift/commits?author=usandfriends "Tests") | [<img src="https://avatars0.githubusercontent.com/u/474248?v=4" width="100px;"/><br /><sub>Robin Drexler</sub>](https://www.robin-drexler.com/)<br />[🐛](https://github.com/paypal/downshift/issues?q=author%3Arobin-drexler "Bug reports") [💻](https://github.com/paypal/downshift/commits?author=robin-drexler "Code") | [<img src="https://avatars0.githubusercontent.com/u/7406639?v=4" width="100px;"/><br /><sub>Arturo Romero</sub>](http://arturoromero.info/)<br />[💡](#example-arturoromeroslc "Examples") | [<img src="https://avatars1.githubusercontent.com/u/275483?v=4" width="100px;"/><br /><sub>yp</sub>](http://algolab.eu/pirola)<br />[🐛](https://github.com/paypal/downshift/issues?q=author%3Ayp "Bug reports") [💻](https://github.com/paypal/downshift/commits?author=yp "Code") [⚠️](https://github.com/paypal/downshift/commits?author=yp "Tests") | [<img src="https://avatars0.githubusercontent.com/u/3998604?v=4" width="100px;"/><br /><sub>Dave Garwacke</sub>](http://www.warbyparker.com)<br />[📖](https://github.com/paypal/downshift/commits?author=ifyoumakeit "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/11758660?v=4" width="100px;"/><br /><sub>Ivan Pazhitnykh</sub>](http://linkedin.com/in/drapegnik)<br />[💻](https://github.com/paypal/downshift/commits?author=Drapegnik "Code") [⚠️](https://github.com/paypal/downshift/commits?author=Drapegnik "Tests") | [<img src="https://avatars0.githubusercontent.com/u/61776?v=4" width="100px;"/><br /><sub>Luis Merino</sub>](https://github.com/Rendez)<br />[📖](https://github.com/paypal/downshift/commits?author=Rendez "Documentation") |
+| [<img src="https://avatars0.githubusercontent.com/u/8746094?v=4" width="100px;"/><br /><sub>Andrew Hansen</sub>](http://twitter.com/arahansen)<br />[💻](https://github.com/paypal/downshift/commits?author=arahansen "Code") [⚠️](https://github.com/paypal/downshift/commits?author=arahansen "Tests") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors][all-contributors] specification.

src/__tests__/downshift.lifecycle.js

@@ -92,6 +92,22 @@ test('props update of selectedItem will update the inputValue state', () => {
   )
 })
 
+test('props update of selectedItem will not update inputValue state', () => {
+  const onInputValueChangeSpy = jest.fn(() => null)
+  const wrapper = mount(
+    <Downshift
+      onInputValueChange={onInputValueChangeSpy}
+      selectedItemChanged={(prevItem, item) => prevItem.id !== item.id}
+      selectedItem={{id: '123', value: 'wow'}}
+    >
+      {() => null}
+    </Downshift>,
+  )
+  onInputValueChangeSpy.mockClear()
+  wrapper.setProps({selectedItem: {id: '123', value: 'not wow'}})
+  expect(onInputValueChangeSpy).not.toHaveBeenCalled()
+})
+
 function mouseDownAndUp(node) {
   node.dispatchEvent(new window.MouseEvent('mousedown', {bubbles: true}))
   node.dispatchEvent(new window.MouseEvent('mouseup', {bubbles: true}))

src/__tests__/downshift.misc.js

@@ -32,6 +32,24 @@ test('selectItemAtIndex does nothing if there is no item at that index', () => {
   expect(childSpy).not.toHaveBeenCalled()
 })
 
+test('selectItemAtIndex can select item that is an empty string', () => {
+  const items = ['Chess', '']
+  const children = ({getItemProps}) => (
+    <div>
+      {items.map((item, index) => (
+        <div key={index} {...getItemProps({item})}>
+          {item}
+        </div>
+      ))}
+    </div>
+  )
+  const {selectItemAtIndex, childSpy} = setup({children})
+  selectItemAtIndex(1)
+  expect(childSpy).toHaveBeenLastCalledWith(
+    expect.objectContaining({selectedItem: ''}),
+  )
+})
+
 test('clearSelection with an input node focuses the input node', () => {
   const children = ({getInputProps}) => (
     <div>
@@ -57,8 +75,15 @@ test('toggleMenu can take no arguments at all', () => {
 })
 
 test('clearItems clears the all items', () => {
-  const items = ['Chess']
-  const {wrapper, clearItems} = setup({items})
+  const item = 'Chess'
+  const children = ({getItemProps}) => (
+    <div>
+      <div key={item} {...getItemProps({item})}>
+        {item}
+      </div>
+    </div>
+  )
+  const {wrapper, clearItems} = setup({children})
   clearItems()
   expect(wrapper.instance().items).toEqual([])
 })

src/__tests__/downshift.props.js

@@ -34,7 +34,7 @@ test('onStateChange called with changes and downshift state and helpers', () =>
   )
 })
 
-test('onChange called when clearSelection is trigered', () => {
+test('onChange called when clearSelection is triggered', () => {
   const handleChange = jest.fn()
   const {clearSelection} = setup({
     selectedItem: 'foo',
@@ -127,6 +127,7 @@ test('onInputValueChange not called when changes do not contain inputValue', ()
   const {openMenu} = setup({
     onInputValueChange: handleInputValueChange,
   })
+
   openMenu()
 
   expect(handleInputValueChange).toHaveBeenCalledTimes(0)

src/__tests__/utils.findParent.js

@@ -0,0 +1,9 @@
+import {findParent} from '../utils'
+
+test('return documentElement when founded node is document.body and scrollTop is 0', () => {
+  const node = document.createElement('div')
+  const parentNode = document.body
+  parentNode.appendChild(node)
+  const scrollParent = findParent(el => el === parentNode, node, parentNode)
+  expect(scrollParent).toBe(document.documentElement)
+})

src/__tests__/utils.scroll-into-view.js

@@ -20,6 +20,21 @@ test('does nothing if the node is within the scrollable area', () => {
   expect(scrollableNode.scrollTop).toBe(scrollableScrollTop)
 })
 
+test('does nothing if parent.top is above view area and node within view', () => {
+  const scrollableScrollTop = 1000
+  const node = getNode({height: 40, top: 300})
+  // parent bounds is [-1000 + 1000, -500 + 1000] = [0, 500]
+  // node bounds is [300, 340] => node within visible area
+  const scrollableNode = getScrollableNode({
+    top: -1000,
+    height: 500,
+    scrollTop: scrollableScrollTop,
+    children: [node],
+  })
+  scrollIntoView(node, scrollableNode)
+  expect(scrollableNode.scrollTop).toBe(scrollableScrollTop)
+})
+
 test('aligns to top when the node is above the scrollable parent', () => {
   // TODO: make this test a tiny bit more readable/maintainable...
   const nodeTop = 2
@@ -34,6 +49,29 @@ test('aligns to top when the node is above the scrollable parent', () => {
   expect(scrollableNode.scrollTop).toBe(5)
 })
 
+test('aligns to top when the node is above view area', () => {
+  const node = getNode({height: 40, top: -15})
+  const scrollableNode = getScrollableNode({
+    top: -50,
+    scrollTop: 100,
+    children: [node],
+  })
+  scrollIntoView(node, scrollableNode)
+  expect(scrollableNode.scrollTop).toBe(85)
+})
+
+test('aligns to bottom when the node is below the scrollable parent and parent top above view area', () => {
+  const node = getNode({height: 40, top: 280})
+  const scrollableNode = getScrollableNode({
+    top: -60,
+    height: 360,
+    scrollTop: 28,
+    children: [node],
+  })
+  scrollIntoView(node, scrollableNode)
+  expect(scrollableNode.scrollTop).toBe(48)
+})
+
 test('aligns to bottom when the node is below the scrollable parent', () => {
   const nodeTop = 115
   const node = getNode({height: 10, top: nodeTop})
@@ -88,7 +126,7 @@ function getNode(
     top,
     left: 0,
     right: 50,
-    bottom: height,
+    bottom: top + height,
   })
   div.style.borderTopWidth = borderTopWidth
   div.style.borderBottomWidth = borderBottomWidth

src/downshift.js

@@ -36,6 +36,7 @@ class Downshift extends Component {
     onUserAction: PropTypes.func,
     onClick: PropTypes.func,
     onOuterClick: PropTypes.func,
+    selectedItemChanged: PropTypes.func,
     itemCount: PropTypes.number,
     id: PropTypes.string,
     environment: PropTypes.shape({
@@ -69,6 +70,7 @@ class Downshift extends Component {
     onChange: () => {},
     onSelect: () => {},
     onOuterClick: () => {},
+    selectedItemChanged: (prevItem, item) => prevItem !== item,
     environment:
       typeof window === 'undefined' /* istanbul ignore next (ssr) */
         ? {}
@@ -247,7 +249,7 @@ class Downshift extends Component {
 
   selectItemAtIndex = (itemIndex, otherStateToSet, cb) => {
     const item = this.items[itemIndex]
-    if (!item) {
+    if (item == null) {
       return
     }
     this.selectItem(item, otherStateToSet, cb)
@@ -746,7 +748,10 @@ class Downshift extends Component {
   componentDidUpdate(prevProps) {
     if (
       this.isControlledProp('selectedItem') &&
-      this.props.selectedItem !== prevProps.selectedItem
+      this.props.selectedItemChanged(
+        prevProps.selectedItem,
+        this.props.selectedItem,
+      )
     ) {
       this.internalSetState({
         type: Downshift.stateChangeTypes.controlledPropUpdatedSelectedItem,