search

karlhadwen / todoist

Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge - Building Todoist Using React
MIT License
1.34k stars 430 forks source link

On key press enter #20

Closed LucasShaffer closed 4 years ago

LucasShaffer commented 4 years ago

Hey @karlhadwen

This PR will address Issue #11

onKeyDown will look for the press of enter and only respond to enter. Other key presses such as tab will act with their default functionality.

Tests have been updated to retain 100% coverage.

Let me know if you have questions.

karlhadwen commented 4 years ago

Hey @LucasShaffer, apologies I've only just seen this. I've pulled your PR and I tab through the website and get to the dark mode and when I hit tab, nothing happens? But when I click on the button it switches modes--do you know why?

LucasShaffer commented 4 years ago

Hey @karlhadwen, that is happening to me as well, quite odd. It looks like the onClick is running immediately after. Which is causing the darkMode to go back to false. I added a log in both the onClick and onKeyDown, as well as logged the darkMode right above the return in Header.js to see what was happening. Not sure why that onClick it being called though.

LucasShaffer commented 4 years ago

@karlhadwen, What is even weirder is that it works properly when using the spacebar, and also works with the quick add task. ~Although, spacebar does not act as an Enter for other interactive elements outside of Header.js.~ It is not working properly when it is a button element.

LucasShaffer commented 4 years ago

@karlhadwen, okay. There was an issue with using onKeyDown with a button element. It looks like it will react to enter and space as if it were a click by default and therefore does not need onKeyDown to be specified.

karlhadwen commented 4 years ago

Great work on this @LucasShaffer, I really appreciate you spending the time on this! I've made a few linting changes and added a few new files (ESLint & Prettier configs). Thanks again!