Skip to content

fix(List): Fix scroll to highlighted component with keyboard navigation #145

Merged
igorarkhipenko merged 11 commits intomasterfrom
1460-keyboard-navigation
Jul 25, 2019
Merged

fix(List): Fix scroll to highlighted component with keyboard navigation #145
igorarkhipenko merged 11 commits intomasterfrom
1460-keyboard-navigation

Conversation

@igorarkhipenko
Copy link
Copy Markdown
Contributor

No description provided.


// Scroll view with a delay so this function would refer to the next highlighted item
setTimeout(() => {
highlightedListItem.current.scrollIntoView(SCROLL_INTO_VIEW_SETTINGS);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

  1. IE11 doesn't support scrollIntoView :(

  2. What if component was unmounted before this timeout is executed?

Copy link
Copy Markdown
Contributor Author

@igorarkhipenko igorarkhipenko Jul 24, 2019

Choose a reason for hiding this comment

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

@antipin

  1. Yeah, that's a pity, it doesn't get SCROLL_INTO_VIEW_SETTINGS param but the scroll by itself is still working so we decided to stick with that.
  2. I'll add clearTimeout function call before unmounting to be sure it never happens

@igorarkhipenko igorarkhipenko requested a review from antipin July 25, 2019 09:01
}
}, [selectedIndex]);

const getNextSelectedIndex = keyCode => {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Looks good. But I've just noticed that all the event handlers in this component are being recreated on every render, which is not efficient. Could you wrap them into useCallback in order to memoize it?

@igorarkhipenko igorarkhipenko merged commit 165b025 into master Jul 25, 2019
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.

3 participants