diff --git a/src/__tests__/__snapshots__/downshift.get-root-props.js.snap b/src/__tests__/__snapshots__/downshift.get-root-props.js.snap index ad7e45839..d96011e6e 100644 --- a/src/__tests__/__snapshots__/downshift.get-root-props.js.snap +++ b/src/__tests__/__snapshots__/downshift.get-root-props.js.snap @@ -1,7 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`not applying the onClick prop results in an error 1`] = `"downshift: You must apply the \\"onClick\\" prop from getRootProps onto your root element."`; - exports[`not applying the ref prop results in an error 1`] = `"downshift: You must apply the ref prop \\"ref\\" from getRootProps onto your root element."`; exports[`returning a DOM element and calling getRootProps with a refKey results in an error 1`] = `"downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified \\"blah\\""`; diff --git a/src/__tests__/downshift.get-root-props.js b/src/__tests__/downshift.get-root-props.js index 005647133..15fd709ab 100644 --- a/src/__tests__/downshift.get-root-props.js +++ b/src/__tests__/downshift.get-root-props.js @@ -47,18 +47,6 @@ test('not applying the ref prop results in an error', () => { expect(() => mount()).toThrowErrorMatchingSnapshot() }) -test('not applying the onClick prop results in an error', () => { - const MyComponent = () => ( - - {({getRootProps}) => { - const {ref} = getRootProps() - return
- }} - - ) - expect(() => mount()).toThrowErrorMatchingSnapshot() -}) - test('renders fine when rendering a composite component and applying getRootProps properly', () => { const MyComponent = () => ( diff --git a/src/downshift.js b/src/downshift.js index 615e13f03..d45af9eac 100644 --- a/src/downshift.js +++ b/src/downshift.js @@ -5,13 +5,11 @@ import PropTypes from 'prop-types' import setA11yStatus from './set-a11y-status' import { cbToCb, - findParent, composeEventHandlers, debounce, scrollIntoView, generateId, firstDefined, - isNumber, getA11yStatusMessage, unwrapArray, isDOMElement, @@ -370,35 +368,17 @@ class Downshift extends Component { rootRef = node => (this._rootNode = node) - getRootProps = ({refKey = 'ref', onClick, ...rest} = {}) => { + getRootProps = ({refKey = 'ref', ...rest} = {}) => { // this is used in the render to know whether the user has called getRootProps. // It uses that to know whether to apply the props automatically this.getRootProps.called = true this.getRootProps.refKey = refKey return { [refKey]: this.rootRef, - onClick: composeEventHandlers(onClick, this.root_handleClick), ...rest, } } - root_handleClick = event => { - event.preventDefault() - const itemParent = findParent( - node => { - const index = this.getItemIndexFromId(node.getAttribute('id')) - return isNumber(index) - }, - event.target, - this._rootNode, - ) - if (itemParent) { - this.selectItemAtIndex( - this.getItemIndexFromId(itemParent.getAttribute('id')), - ) - } - } - //\\\\\\\\\\\\\\\\\\\\\\\\\\ ROOT keyDownHandlers = { @@ -566,17 +546,10 @@ class Downshift extends Component { return `${this.id}-item-${index}` } - getItemIndexFromId(id) { - if (id) { - return Number(id.split(`${this.id}-item-`)[1]) - } else { - return null - } - } - getItemProps = ( { onMouseEnter, + onClick, index, item = requiredProp('getItemProps', 'item'), ...rest @@ -595,6 +568,9 @@ class Downshift extends Component { type: Downshift.stateChangeTypes.itemMouseEnter, }) }), + onClick: composeEventHandlers(onClick, () => { + this.selectItemAtIndex(index) + }), ...rest, } } @@ -766,9 +742,4 @@ function validateGetRootPropsCalledCorrectly(element, {refKey}) { `downshift: You must apply the ref prop "${refKey}" from getRootProps onto your root element.`, ) } - if (!getElementProps(element).hasOwnProperty('onClick')) { - throw new Error( - `downshift: You must apply the "onClick" prop from getRootProps onto your root element.`, - ) - } } diff --git a/src/utils.js b/src/utils.js index 21d097abf..2dba9ac2a 100644 --- a/src/utils.js +++ b/src/utils.js @@ -146,12 +146,6 @@ function firstDefined(...args) { return args.find(a => typeof a !== 'undefined') } -function isNumber(thing) { - // not NaN and is a number type - // eslint-disable-next-line no-self-compare - return thing === thing && typeof thing === 'number' -} - // eslint-disable-next-line complexity function getA11yStatusMessage({ isOpen, @@ -242,7 +236,7 @@ const stateKeys = [ */ function pickState(state = {}) { const result = {} - stateKeys.forEach((k) => { + stateKeys.forEach(k => { if (state.hasOwnProperty(k)) { result[k] = state[k] } @@ -252,13 +246,11 @@ function pickState(state = {}) { export { cbToCb, - findParent, composeEventHandlers, debounce, scrollIntoView, generateId, firstDefined, - isNumber, getA11yStatusMessage, unwrapArray, isDOMElement,