From 655bcc24d774817d3d7240601041ab0ce142cc85 Mon Sep 17 00:00:00 2001 From: Eric Edem Date: Mon, 5 Mar 2018 08:28:25 -0800 Subject: [PATCH 1/9] chore(contrib): add @ericedem --- .all-contributorsrc | 12 ++++++++++++ README.md | 4 ++-- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index d5a6857f3..e4cb2c80a 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -644,6 +644,18 @@ "bug", "code" ] + }, + { + "login": "ericedem", + "name": "Eric Edem", + "avatar_url": "https://avatars3.githubusercontent.com/u/1060669?v=4", + "profile": "https://github.com/ericedem", + "contributions": [ + "code", + "doc", + "ideas", + "test" + ] } ] } diff --git a/README.md b/README.md index c0a516972..2148eb59e 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ autocomplete/dropdown/select/combobox components

[![downloads][downloads-badge]][npmcharts] [![version][version-badge]][package] [![MIT License][license-badge]][license] -[![All Contributors](https://img.shields.io/badge/all_contributors-65-orange.svg?style=flat-square)](#contributors) +[![All Contributors](https://img.shields.io/badge/all_contributors-66-orange.svg?style=flat-square)](#contributors) [![PRs Welcome][prs-badge]][prs] [![Chat][chat-badge]][chat] [![Code of Conduct][coc-badge]][coc] @@ -836,7 +836,7 @@ Thanks goes to these people ([emoji key][emojis]): | [
Andrew Hansen](http://twitter.com/arahansen)
[πŸ’»](/paypal/downshift/commits?author=arahansen "Code") [⚠️](/paypal/downshift/commits?author=arahansen "Tests") [πŸ€”](#ideas-arahansen "Ideas, Planning, & Feedback") | [
John Whiles](http://www.johnwhiles.com)
[πŸ’»](/paypal/downshift/commits?author=Jwhiles "Code") | [
Justin Hall](https://github.com/wKovacs64)
[πŸš‡](#infra-wKovacs64 "Infrastructure (Hosting, Build-Tools, etc)") | [
Pete NykΓ€nen](https://twitter.com/pete_tnt)
[πŸ‘€](#review-petetnt "Reviewed Pull Requests") | [
Jared Palmer](http://jaredpalmer.com)
[πŸ’»](/paypal/downshift/commits?author=jaredpalmer "Code") | [
Philip Young](http://www.philipyoungg.com)
[πŸ’»](/paypal/downshift/commits?author=philipyoungg "Code") [⚠️](/paypal/downshift/commits?author=philipyoungg "Tests") [πŸ€”](#ideas-philipyoungg "Ideas, Planning, & Feedback") | [
Alexander Nanberg](https://alexandernanberg.com)
[πŸ“–](/paypal/downshift/commits?author=alexandernanberg "Documentation") | | [
Pete Redmond](https://httpete.com)
[πŸ›](/paypal/downshift/issues?q=author%3Ahttpete-ire "Bug reports") | [
Nick Lavin](https://github.com/Zashy)
[πŸ›](/paypal/downshift/issues?q=author%3AZashy "Bug reports") [πŸ’»](/paypal/downshift/commits?author=Zashy "Code") [⚠️](/paypal/downshift/commits?author=Zashy "Tests") | [
James Long](http://jlongster.com)
[πŸ›](/paypal/downshift/issues?q=author%3Ajlongster "Bug reports") [πŸ’»](/paypal/downshift/commits?author=jlongster "Code") | [
Michael Ball](http://michaelball.co)
[πŸ›](/paypal/downshift/issues?q=author%3Acycomachead "Bug reports") [πŸ’»](/paypal/downshift/commits?author=cycomachead "Code") | [
CAVALEIRO Julien](https://github.com/Julienng)
[πŸ’‘](#example-Julienng "Examples") | [
Kim GrΓΆnqvist](http://www.kimgronqvist.se)
[πŸ’»](/paypal/downshift/commits?author=kimgronqvist "Code") [⚠️](/paypal/downshift/commits?author=kimgronqvist "Tests") | [
Sijie](http://sijietian.com)
[πŸ›](/paypal/downshift/issues?q=author%3Atiansijie "Bug reports") [πŸ’»](/paypal/downshift/commits?author=tiansijie "Code") | | [
Dony Sukardi](http://dsds.io)
[πŸ’‘](#example-donysukardi "Examples") [πŸ’¬](#question-donysukardi "Answering Questions") [πŸ’»](/paypal/downshift/commits?author=donysukardi "Code") [⚠️](/paypal/downshift/commits?author=donysukardi "Tests") | [
Dillon Mulroy](https://dillonmulroy.com)
[πŸ“–](/paypal/downshift/commits?author=dmmulroy "Documentation") | [
Curtis Tate Wilkinson](https://twitter.com/curtytate)
[πŸ’»](/paypal/downshift/commits?author=curtiswilkinson "Code") | [
Brice BERNARD](https://github.com/brikou)
[πŸ›](/paypal/downshift/issues?q=author%3Abrikou "Bug reports") [πŸ’»](/paypal/downshift/commits?author=brikou "Code") | [
Tony Xu](https://github.com/xutopia)
[πŸ’»](/paypal/downshift/commits?author=xutopia "Code") | [
Anthony Ng](http://anthonyng.me)
[πŸ“–](/paypal/downshift/commits?author=newyork-anthonyng "Documentation") | [
S S](https://github.com/notruth)
[πŸ’¬](#question-notruth "Answering Questions") [πŸ’»](/paypal/downshift/commits?author=notruth "Code") [πŸ“–](/paypal/downshift/commits?author=notruth "Documentation") [πŸ€”](#ideas-notruth "Ideas, Planning, & Feedback") [⚠️](/paypal/downshift/commits?author=notruth "Tests") | -| [
Austin Tackaberry](http://austintackaberry.co)
[πŸ’¬](#question-austintackaberry "Answering Questions") [πŸ’»](/paypal/downshift/commits?author=austintackaberry "Code") [πŸ“–](/paypal/downshift/commits?author=austintackaberry "Documentation") | [
Jean Duthon](https://github.com/jduthon)
[πŸ›](/paypal/downshift/issues?q=author%3Ajduthon "Bug reports") [πŸ’»](/paypal/downshift/commits?author=jduthon "Code") | +| [
Austin Tackaberry](http://austintackaberry.co)
[πŸ’¬](#question-austintackaberry "Answering Questions") [πŸ’»](/paypal/downshift/commits?author=austintackaberry "Code") [πŸ“–](/paypal/downshift/commits?author=austintackaberry "Documentation") | [
Jean Duthon](https://github.com/jduthon)
[πŸ›](/paypal/downshift/issues?q=author%3Ajduthon "Bug reports") [πŸ’»](/paypal/downshift/commits?author=jduthon "Code") | [
Eric Edem](https://github.com/ericedem)
[πŸ’»](/paypal/downshift/commits?author=ericedem "Code") [πŸ“–](/paypal/downshift/commits?author=ericedem "Documentation") [πŸ€”](#ideas-ericedem "Ideas, Planning, & Feedback") [⚠️](/paypal/downshift/commits?author=ericedem "Tests") | From 11a173cc56805dab8d4606f238d7ac4ec201eb7c Mon Sep 17 00:00:00 2001 From: Eric Edem Date: Mon, 5 Mar 2018 08:38:05 -0800 Subject: [PATCH 2/9] feat(handlers): prevent default behavior with preventDownshiftDefault Now users can provide their own event handlers and set `event.preventDownshiftDefault = true` to completely disable the default behavior. Also: * Tests * Docs --- README.md | 20 +++++++++ src/__tests__/utils.compose-event-handlers.js | 45 +++++++++++++++++++ src/utils.js | 12 ++--- 3 files changed, 72 insertions(+), 5 deletions(-) create mode 100644 src/__tests__/utils.compose-event-handlers.js diff --git a/README.md b/README.md index 2148eb59e..54e2189b0 100644 --- a/README.md +++ b/README.md @@ -90,6 +90,7 @@ harder to contribute to. * [actions](#actions) * [state](#state) * [props](#props) +* [EventHandlers](#eventhandlers) * [Utilities](#utilities) * [resetIdCounter](#resetidcounter) * [Examples](#examples) @@ -660,6 +661,25 @@ These are values that represent the current state of the downshift component. As a convenience, the `id` and `itemToString` props which you pass to `` are available here as well. +## EventHandlers + +You can provide your own input handlers to Downshift which will be called before the default handlers. + +If you would like to prevent the default behavior, you can set the event's `preventDownshiftDefault` property to `false`. + +For example: + +``` +getInputProps({ + onKeyDown(event) { + // Prevent Downshift's default behavior. + event.preventDownshiftDefault = false; + + // Implement my own behavior... + } +}) +``` + ## Utilities ### resetIdCounter diff --git a/src/__tests__/utils.compose-event-handlers.js b/src/__tests__/utils.compose-event-handlers.js new file mode 100644 index 000000000..68a383309 --- /dev/null +++ b/src/__tests__/utils.compose-event-handlers.js @@ -0,0 +1,45 @@ +import {composeEventHandlers} from '../utils' + +test('prevent default handlers when defaultPrevented is true', () => { + const handler = composeEventHandlers( + e => { + e.defaultPrevented = true + }, + () => { + throw new Error( + 'preventing default should prevent default downshift behavior', + ) + }, + ) + handler({}) +}) + +test('prevent default handlers when defaultDownshiftPrevented is true', () => { + const handler = composeEventHandlers( + e => { + e.preventDownshiftDefault = true + }, + () => { + throw new Error( + 'setting defaultDownshiftPrevented = true should prevent default downshift behavior', + ) + }, + ) + handler({}) +}) + +test('call default handler when defaultDownshiftPrevented and defaultPrevented are false', () => { + let defaultCalled = false + + const handler = composeEventHandlers( + () => {}, + () => { + defaultCalled = true + }, + ) + handler({}) + + if (!defaultCalled) { + throw new Error("default handler not called when default wasn't prevented") + } +}) diff --git a/src/utils.js b/src/utils.js index 1ff92265c..843a30154 100644 --- a/src/utils.js +++ b/src/utils.js @@ -130,10 +130,11 @@ function debounce(fn, time) { } /** - * This is intended to be used to compose event handlers - * They are executed in order until one of them calls - * `event.preventDefault()`. Not sure this is the best - * way to do this, but it seems legit... + * This is intended to be used to compose event handlers. + * They are executed in order until one of them sets + * `event.preventDownshiftDefault = true`. This allows the + * normal event to maintain its intended `event.defaultPrevented` + * state. * @param {Function} fns the event handler functions * @return {Function} the event handler to add to an element */ @@ -141,7 +142,8 @@ function composeEventHandlers(...fns) { return (event, ...args) => fns.some(fn => { fn && fn(event, ...args) - return event.defaultPrevented + // TODO: remove everything after the || in the next breaking change + return event.preventDownshiftDefault || event.defaultPrevented }) } From e8a50758c19c75f6dbb106901c38d1ec469558bb Mon Sep 17 00:00:00 2001 From: Eric Edem Date: Mon, 5 Mar 2018 11:36:41 -0800 Subject: [PATCH 3/9] docs(eventHandlers): provide override example Also use javascript syntax highlighting for code blocks. --- README.md | 29 ++++++++++++++++++++--------- 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index a4a520cf3..16a03be58 100644 --- a/README.md +++ b/README.md @@ -663,23 +663,34 @@ As a convenience, the `id` and `itemToString` props which you pass to ## EventHandlers -You can provide your own input handlers to Downshift which will be called before the default handlers. +You can provide your own event handlers to Downshift which will be called before the default handlers. -If you would like to prevent the default behavior, you can set the event's `preventDownshiftDefault` property to `false`. +If you would like to prevent the default handler behavior in some cases, you can set the event's `preventDownshiftDefault` property to `false`: -For example: - -``` +```javascript getInputProps({ onKeyDown(event) { - // Prevent Downshift's default behavior. - event.preventDownshiftDefault = false; + if (event.key === 'Enter') { + // Prevent Downshift's default 'Enter' behavior. + event.preventDownshiftDefault = false - // Implement my own behavior... - } + // Implement my own behavior... + } + }, }) ``` +If you would like to completely override Downshift's behavior for a handler, in favor of your own, you can bypass prop getters: + +```javascript +let inputProps = { + ...getInputProps(customProps), + onKeyDown(event) { + // Implement my own behavior... + }, +} +``` + ## Utilities ### resetIdCounter From 2ba151e2baf6ab55c32ad110801d0f4799249005 Mon Sep 17 00:00:00 2001 From: Eric Edem Date: Mon, 5 Mar 2018 13:06:37 -0800 Subject: [PATCH 4/9] refactor(composeEventHandlers): use jest for testing --- src/__tests__/utils.compose-event-handlers.js | 63 +++++++++---------- 1 file changed, 28 insertions(+), 35 deletions(-) diff --git a/src/__tests__/utils.compose-event-handlers.js b/src/__tests__/utils.compose-event-handlers.js index 68a383309..1b25607b7 100644 --- a/src/__tests__/utils.compose-event-handlers.js +++ b/src/__tests__/utils.compose-event-handlers.js @@ -1,45 +1,38 @@ import {composeEventHandlers} from '../utils' test('prevent default handlers when defaultPrevented is true', () => { - const handler = composeEventHandlers( - e => { - e.defaultPrevented = true - }, - () => { - throw new Error( - 'preventing default should prevent default downshift behavior', - ) - }, - ) - handler({}) + const customHandler = jest.fn(e => { + e.defaultPrevented = true + }) + const defaultHandler = jest.fn(() => {}) + + const composedHandler = composeEventHandlers(customHandler, defaultHandler) + + composedHandler({}) + expect(customHandler).toHaveBeenCalledTimes(1) + expect(defaultHandler).toHaveBeenCalledTimes(0) }) test('prevent default handlers when defaultDownshiftPrevented is true', () => { - const handler = composeEventHandlers( - e => { - e.preventDownshiftDefault = true - }, - () => { - throw new Error( - 'setting defaultDownshiftPrevented = true should prevent default downshift behavior', - ) - }, - ) - handler({}) + const customHandler = jest.fn(e => { + e.preventDownshiftDefault = true + }) + const defaultHandler = jest.fn(() => {}) + + const composedHandler = composeEventHandlers(customHandler, defaultHandler) + + composedHandler({}) + expect(customHandler).toHaveBeenCalledTimes(1) + expect(defaultHandler).toHaveBeenCalledTimes(0) }) test('call default handler when defaultDownshiftPrevented and defaultPrevented are false', () => { - let defaultCalled = false - - const handler = composeEventHandlers( - () => {}, - () => { - defaultCalled = true - }, - ) - handler({}) - - if (!defaultCalled) { - throw new Error("default handler not called when default wasn't prevented") - } + const customHandler = jest.fn(() => {}) + const defaultHandler = jest.fn(() => {}) + + const composedHandler = composeEventHandlers(customHandler, defaultHandler) + + composedHandler({}) + expect(customHandler).toHaveBeenCalledTimes(1) + expect(defaultHandler).toHaveBeenCalledTimes(1) }) From ebb1bac7609ee49092382d0f450439dc7f263afe Mon Sep 17 00:00:00 2001 From: Eric Edem Date: Mon, 5 Mar 2018 13:09:08 -0800 Subject: [PATCH 5/9] docs(eventHandlers): make examples new user friendly --- README.md | 34 ++++++++++++++++++---------------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 16a03be58..e929f89f0 100644 --- a/README.md +++ b/README.md @@ -668,27 +668,29 @@ You can provide your own event handlers to Downshift which will be called before If you would like to prevent the default handler behavior in some cases, you can set the event's `preventDownshiftDefault` property to `false`: ```javascript -getInputProps({ - onKeyDown(event) { - if (event.key === 'Enter') { - // Prevent Downshift's default 'Enter' behavior. - event.preventDownshiftDefault = false - - // Implement my own behavior... - } - }, -}) + ``` If you would like to completely override Downshift's behavior for a handler, in favor of your own, you can bypass prop getters: ```javascript -let inputProps = { - ...getInputProps(customProps), - onKeyDown(event) { - // Implement my own behavior... - }, -} + { + /* my own behavior... */ + }} +/> ``` ## Utilities From 614727afb257594adf12e25045899868f885c218 Mon Sep 17 00:00:00 2001 From: Eric Edem Date: Mon, 5 Mar 2018 13:11:29 -0800 Subject: [PATCH 6/9] fix(composeEventHandlers): remove extraneous doc comment sentence. --- src/utils.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/utils.js b/src/utils.js index 843a30154..3edea271d 100644 --- a/src/utils.js +++ b/src/utils.js @@ -132,9 +132,7 @@ function debounce(fn, time) { /** * This is intended to be used to compose event handlers. * They are executed in order until one of them sets - * `event.preventDownshiftDefault = true`. This allows the - * normal event to maintain its intended `event.defaultPrevented` - * state. + * `event.preventDownshiftDefault = true`. * @param {Function} fns the event handler functions * @return {Function} the event handler to add to an element */ From 1366d0a2c50485defbf306591c91727e297ced08 Mon Sep 17 00:00:00 2001 From: Eric Edem Date: Mon, 5 Mar 2018 14:26:00 -0800 Subject: [PATCH 7/9] refactor(composeEventHandler): use parameter-less jest.fn() --- src/__tests__/utils.compose-event-handlers.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/__tests__/utils.compose-event-handlers.js b/src/__tests__/utils.compose-event-handlers.js index 1b25607b7..44325265a 100644 --- a/src/__tests__/utils.compose-event-handlers.js +++ b/src/__tests__/utils.compose-event-handlers.js @@ -4,7 +4,7 @@ test('prevent default handlers when defaultPrevented is true', () => { const customHandler = jest.fn(e => { e.defaultPrevented = true }) - const defaultHandler = jest.fn(() => {}) + const defaultHandler = jest.fn() const composedHandler = composeEventHandlers(customHandler, defaultHandler) @@ -17,7 +17,7 @@ test('prevent default handlers when defaultDownshiftPrevented is true', () => { const customHandler = jest.fn(e => { e.preventDownshiftDefault = true }) - const defaultHandler = jest.fn(() => {}) + const defaultHandler = jest.fn() const composedHandler = composeEventHandlers(customHandler, defaultHandler) @@ -27,8 +27,8 @@ test('prevent default handlers when defaultDownshiftPrevented is true', () => { }) test('call default handler when defaultDownshiftPrevented and defaultPrevented are false', () => { - const customHandler = jest.fn(() => {}) - const defaultHandler = jest.fn(() => {}) + const customHandler = jest.fn() + const defaultHandler = jest.fn() const composedHandler = composeEventHandlers(customHandler, defaultHandler) From f6251e2f9a3ac747a3a07fcaf157ccbe67415fbf Mon Sep 17 00:00:00 2001 From: Eric Edem Date: Mon, 5 Mar 2018 14:42:11 -0800 Subject: [PATCH 8/9] docs(eventHandlers): add basic example --- README.md | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index e929f89f0..f232e1561 100644 --- a/README.md +++ b/README.md @@ -663,19 +663,29 @@ As a convenience, the `id` and `itemToString` props which you pass to ## EventHandlers -You can provide your own event handlers to Downshift which will be called before the default handlers. +You can provide your own event handlers to Downshift which will be called before the default handlers: + +```javascript + { + // your handler code + }, + })} +/> +``` If you would like to prevent the default handler behavior in some cases, you can set the event's `preventDownshiftDefault` property to `false`: ```javascript { if (event.key === 'Enter') { // Prevent Downshift's default 'Enter' behavior. event.preventDownshiftDefault = false - // my own behavior... + // your handler code } }, })} @@ -688,7 +698,7 @@ If you would like to completely override Downshift's behavior for a handler, in { - /* my own behavior... */ + // your handler code }} /> ``` From 68277e74261facc45be578dad462c711dc64d132 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Mon, 5 Mar 2018 15:49:17 -0700 Subject: [PATCH 9/9] Update README.md --- README.md | 72 ++++++++++++++++++++++++++++++++++--------------------- 1 file changed, 45 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index f232e1561..75b826d6e 100644 --- a/README.md +++ b/README.md @@ -90,7 +90,7 @@ harder to contribute to. * [actions](#actions) * [state](#state) * [props](#props) -* [EventHandlers](#eventhandlers) +* [Event Handlers](#event-handlers) * [Utilities](#utilities) * [resetIdCounter](#resetidcounter) * [Examples](#examples) @@ -661,46 +661,64 @@ These are values that represent the current state of the downshift component. As a convenience, the `id` and `itemToString` props which you pass to `` are available here as well. -## EventHandlers +## Event Handlers You can provide your own event handlers to Downshift which will be called before the default handlers: ```javascript - { - // your handler code - }, - })} -/> +const ui = ( + + {({getInputProps}) => ( + { + // your handler code + } + })} + /> + )} + +) ``` If you would like to prevent the default handler behavior in some cases, you can set the event's `preventDownshiftDefault` property to `false`: ```javascript - { - if (event.key === 'Enter') { - // Prevent Downshift's default 'Enter' behavior. - event.preventDownshiftDefault = false - - // your handler code - } - }, - })} -/> +const ui = ( + + {({getInputProps}) => ( + { + if (event.key === 'Enter') { + // Prevent Downshift's default 'Enter' behavior. + event.preventDownshiftDefault = false + + // your handler code + } + } + })} + /> + )} + +) ``` If you would like to completely override Downshift's behavior for a handler, in favor of your own, you can bypass prop getters: ```javascript - { - // your handler code - }} -/> +const ui = ( + + {({getInputProps}) => ( + { + // your handler code + }} + /> + )} + +) ``` ## Utilities