feat(handlers): prevent default behavior with preventDownshiftDefault #358

ericedem · 2018-03-05T17:20:20Z

What: allow event handlers to prevent default downshift behavior

This is the non-breaking change for #353.

Why: Previously, you could only prevent default behavior by calling event.preventDefault(). This worked, but it would also prevent events from triggering other default behaviors like form submission.

How: composeEventHandlers() now checks for event.preventDownshiftDefault in addition to event.defaultPrevented. The check for event.defaultPrevented will be removed in the next breaking change.

Checklist:

Documentation
Tests
Ready to be merged
Added myself to contributors table

Now users can provide their own event handlers and set `event.preventDownshiftDefault = true` to completely disable the default behavior. Also: * Tests * Docs

kentcdodds

Looking awesome! Just a comment about docs.

kentcdodds · 2018-03-05T19:17:52Z

README.md

+
+For example:
+
+```


Let's add javascript here so we get syntax highlighting.

Also, could we add an example that shows that you can completely override the built-in prop by adding the prop after spreading the prop getter?

Also use javascript syntax highlighting for code blocks.

codecov-io · 2018-03-05T19:50:31Z

Codecov Report

Merging #358 into master will not change coverage.
The diff coverage is 100%.

@@          Coverage Diff          @@
##           master   #358   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files           4      4           
  Lines         330    330           
  Branches       84     85    +1     
=====================================
  Hits          330    330

Impacted Files	Coverage Δ
src/utils.js	`100% <100%> (ø)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 10d2cf6...68277e7. Read the comment docs.

kentcdodds

Cool, looking good 👍 Just a few thoughts.

kentcdodds · 2018-03-05T19:49:54Z

src/__tests__/utils.compose-event-handlers.js

+    e => {
+      e.defaultPrevented = true
+    },
+    () => {


Rather than this, could we use Jest mock functions (via jest.fn()) and assertions? Could make the defaultCalled cleaner as well.

kentcdodds · 2018-03-05T19:50:51Z

README.md

+  },
+}
+```
+


Cool, thanks for the update. Could we make these examples more practical so folks who may be more beginner will understand. So like:

<input {...getInputProps()} onKeyDown={event => { /* my own stuff */} />

And the same for the example above?

kentcdodds · 2018-03-05T19:51:23Z

src/utils.js

+ * 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.


The last sentence of this comment is unnecessary.

kentcdodds

Thanks so much for iterating with me on this so well. We're almost there! Very well done!

kentcdodds · 2018-03-05T22:09:14Z

README.md

+## EventHandlers
+
+You can provide your own event handlers to Downshift which will be called before the default handlers.
+


Maybe we should add a simple example here:

<input {...getInputProps({onKeyDown: event => /* your handler code */ })} />

kentcdodds · 2018-03-05T22:10:12Z

README.md

+```javascript
+<input
+  {...getInputProps({
+    onKeyDown(event) {


Let's change this to an arrow function just in case someone new copy/pastes this and tries to use this and doesn't understand why it's not working.

kentcdodds · 2018-03-05T22:10:56Z

src/__tests__/utils.compose-event-handlers.js

+
+test('call default handler when defaultDownshiftPrevented and defaultPrevented are false', () => {
+  const customHandler = jest.fn(() => {})
+  const defaultHandler = jest.fn(() => {})


If you don't care about the implementation you can just do: jest.fn() and that's the same as what you have here.

Other than that, these tests are awesome 👍

ericedem · 2018-03-05T22:45:23Z

Thanks so much for iterating with me on this so well.

Thanks for the feedback! Better to get this done right. :)

kentcdodds

This is excellent! Thank you so much for your help here!

kentcdodds · 2018-03-05T22:50:14Z

Thanks so much for your help! I've added you as a collaborator on the project. Please make sure that you review the other/MAINTAINING.md and CONTRIBUTING.md files (specifically the bit about the commit messages and the git hooks) and familiarize yourself with the code of conduct (we're using the contributor covenant). You might also want to watch the repo to be notified when someone files an issue/PR. Please continue to make PRs as you feel the need (you can make your branches directly on the repo rather than your fork if you want). Thanks! And welcome to the team :)

There was an issue with a minor release, so this manual-releases.md change is to release a new minor version. No idea what went wrong... Reference: #358

@ericedem

downshift-js#358) * chore(contrib): add @ericedem * 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 * docs(eventHandlers): provide override example Also use javascript syntax highlighting for code blocks. * refactor(composeEventHandlers): use jest for testing * docs(eventHandlers): make examples new user friendly * fix(composeEventHandlers): remove extraneous doc comment sentence. * refactor(composeEventHandler): use parameter-less jest.fn() * docs(eventHandlers): add basic example * Update README.md Closes downshift-js#353 Closes downshift-js#330

There was an issue with a minor release, so this manual-releases.md change is to release a new minor version. No idea what went wrong... Reference: downshift-js#358

ericedem added 3 commits March 5, 2018 08:28

chore(contrib): add @ericedem

655bcc2

feat(handlers): prevent default behavior with preventDownshiftDefault

11a173c

Now users can provide their own event handlers and set `event.preventDownshiftDefault = true` to completely disable the default behavior. Also: * Tests * Docs

Merge branch 'master' of github.com:paypal/downshift into events

6e204f1

kentcdodds reviewed Mar 5, 2018

View reviewed changes

docs(eventHandlers): provide override example

e8a5075

Also use javascript syntax highlighting for code blocks.

kentcdodds reviewed Mar 5, 2018

View reviewed changes

ericedem added 3 commits March 5, 2018 13:06

refactor(composeEventHandlers): use jest for testing

2ba151e

docs(eventHandlers): make examples new user friendly

ebb1bac

fix(composeEventHandlers): remove extraneous doc comment sentence.

614727a

kentcdodds reviewed Mar 5, 2018

View reviewed changes

ericedem added 2 commits March 5, 2018 14:26

refactor(composeEventHandler): use parameter-less jest.fn()

1366d0a

docs(eventHandlers): add basic example

f6251e2

Update README.md

68277e7

kentcdodds approved these changes Mar 5, 2018

View reviewed changes

kentcdodds merged commit 07b0d95 into downshift-js:master Mar 5, 2018

ericedem deleted the events branch March 5, 2018 22:52

kentcdodds pushed a commit that referenced this pull request Mar 5, 2018

feat(release): manually release a minor version

ba1b439

There was an issue with a minor release, so this manual-releases.md change is to release a new minor version. No idea what went wrong... Reference: #358

indiesquidge mentioned this pull request Mar 12, 2018

Add docs for default keydown handlers #370

Merged

4 tasks

oliviertassinari mentioned this pull request Apr 26, 2020

[Autocomplete] Add ability to override/compose key down events in autocomplete mui/material-ui#19887

Closed

1 task

oliviertassinari mentioned this pull request Nov 16, 2020

[Autocomplete] Add ability to override key down events handlers mui/material-ui#23487

Merged

oliviertassinari mentioned this pull request Apr 16, 2021

[RFC] Use event.defaultMuiPrevented to prevent default events mui/mui-x#1403

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(handlers): prevent default behavior with preventDownshiftDefault #358

feat(handlers): prevent default behavior with preventDownshiftDefault #358

ericedem commented Mar 5, 2018

kentcdodds left a comment

kentcdodds Mar 5, 2018

codecov-io commented Mar 5, 2018 •

edited

Loading

kentcdodds left a comment

kentcdodds Mar 5, 2018

kentcdodds Mar 5, 2018

kentcdodds Mar 5, 2018

kentcdodds left a comment

kentcdodds Mar 5, 2018

kentcdodds Mar 5, 2018

kentcdodds Mar 5, 2018

ericedem commented Mar 5, 2018

kentcdodds left a comment

kentcdodds commented Mar 5, 2018

		## EventHandlers

		You can provide your own event handlers to Downshift which will be called before the default handlers.


		For example:

		```

feat(handlers): prevent default behavior with preventDownshiftDefault #358

feat(handlers): prevent default behavior with preventDownshiftDefault #358

Conversation

ericedem commented Mar 5, 2018

kentcdodds left a comment

Choose a reason for hiding this comment

kentcdodds Mar 5, 2018

Choose a reason for hiding this comment

codecov-io commented Mar 5, 2018 • edited Loading

Codecov Report

kentcdodds left a comment

Choose a reason for hiding this comment

kentcdodds Mar 5, 2018

Choose a reason for hiding this comment

kentcdodds Mar 5, 2018

Choose a reason for hiding this comment

kentcdodds Mar 5, 2018

Choose a reason for hiding this comment

kentcdodds left a comment

Choose a reason for hiding this comment

kentcdodds Mar 5, 2018

Choose a reason for hiding this comment

kentcdodds Mar 5, 2018

Choose a reason for hiding this comment

kentcdodds Mar 5, 2018

Choose a reason for hiding this comment

ericedem commented Mar 5, 2018

kentcdodds left a comment

Choose a reason for hiding this comment

kentcdodds commented Mar 5, 2018

codecov-io commented Mar 5, 2018 •

edited

Loading