Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fixes scroll into view cases above viewport #279

Merged
merged 4 commits into from Dec 9, 2017

Conversation

Zashy
Copy link
Contributor

@Zashy Zashy commented Dec 8, 2017

What: Fixes #274

Why: See #274. Scrolling was weird when going from last to first item with arrow keys.

How: I added a change I used in my project, and then worked on figuring out the unit tests. On reviewing the unit tests I realized the intent of the previous code was meant for multiple cases when the item is above the current viewport. I worked out that there are three cases. They are hard to explain, so I made an image to better explain.

image

  • The scrollable parent is above the viewport, and the item is above that parent
  • The scrollable parent is above the viewport, and the item is above the viewport, but below the parent
  • The scrollable parent is within the viewport, but the item is above the viewport

The first two simplified into the same equation after working them out, and was the same as the existing logic. The third case was the one I had fixed already. I then added in the conditional logic to select the cases, and applied the formulas. I also updated one unit test, and added two new unit tests to account for all three cases I found.

Checklist:

  • Documentation N/A
  • Tests
  • Ready to be merged
  • Added myself to contributors table

@codecov-io
Copy link

codecov-io commented Dec 9, 2017

Codecov Report

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

Impacted file tree graph

@@          Coverage Diff          @@
##           master   #279   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files           4      4           
  Lines         311    314    +3     
  Branches       76     77    +1     
=====================================
+ Hits          311    314    +3
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 ffebbcf...65a3be6. Read the comment docs.

kentcdodds
kentcdodds previously approved these changes Dec 9, 2017
Copy link
Member

@kentcdodds kentcdodds left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you so much! Do you think you could rebase your branch onto master? Thanks!

README.md Outdated
@@ -279,8 +278,7 @@ This function is called anytime the internal state changes. This can be useful
if you're using downshift as a "controlled" component, where you manage some or
all of the state (e.g. isOpen, selectedItem, highlightedIndex, etc) and then
pass it as props, rather than letting downshift control all its state itself.
The parameters both take the shape of internal state (`{highlightedIndex:
number, inputValue: string, isOpen: boolean, selectedItem: any}`) but differ
The parameters both take the shape of internal state (`{highlightedIndex: number, inputValue: string, isOpen: boolean, selectedItem: any}`) but differ
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm guessing this reformatting happened because you either didn't install the project dependencies or the recent prettier release has some bugs 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried to follow the instructions as best as I could. Not sure where that was introduced, but somewhere between install and doing the contribution script.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No worries 😄

@Zashy
Copy link
Contributor Author

Zashy commented Dec 9, 2017

will do

@kentcdodds kentcdodds merged commit 522617c into downshift-js:master Dec 9, 2017
@kentcdodds
Copy link
Member

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 :)

Rendez pushed a commit to Rendez/downshift that referenced this pull request Sep 30, 2018
* update readme as per contribution instructions

* fix scrolling when going from bottom to top when down the page

* update unit tests to cover newly uncovered cases

* fix readme stuff
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Keying down from last item to first item doesn't scroll all the way
3 participants