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

Pass focusedOption to the MenuList #3360

Merged
merged 3 commits into from
Mar 19, 2021
Merged

Conversation

sunniejai
Copy link

@sunniejai sunniejai commented Jan 16, 2019

This is useful for when you're overriding MenuList with a virtualized list (react-virtualized). You will need to know the focusedOption so that you can handle scrolling the virtualized list.

Now it's possible to do something like this in MenuList:

class MenuList extends React.PureComponent {
    componentDidUpdate(prevProps) {
        const { focusedOption } = this.props
        const previousFocusedIndex = getIndex(prevProps.focusedOption)
        const focusedOptionIndex = getIndex(focusedOption)
        if (previousFocusedIndex != focusedOptionIndex && this.listRef) {
          this.list.scrollToRow(focusedOptionIndex)
        }
    }
    ...
}

Also useful here: #2612

…ling when overridng MenuList with a virtualized list from react-virtualized
@bladey bladey added enhancement pr/needs-review PRs that need to be reviewed to determine outcome labels Jun 3, 2020
@bladey bladey added pr/enhancement PRs that are specifically enhancing the project and removed category/enhancement labels Jun 24, 2020
@ebonow ebonow added the menu-bug Addresses menu positioning, scrolling, or general interactions label Jan 16, 2021
@ebonow ebonow added this to the 4.3 milestone Mar 10, 2021
@ebonow
Copy link
Collaborator

ebonow commented Mar 10, 2021

Quick question: Would this cause any additional re-renders passing in this option to the menu?

@changeset-bot
Copy link

changeset-bot bot commented Mar 18, 2021

🦋 Changeset detected

Latest commit: 035294f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
react-select Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 18, 2021

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 035294f:

Sandbox Source
react-codesandboxer-example Configuration

@JedWatson JedWatson merged commit f3c0bb5 into JedWatson:master Mar 19, 2021
This was referenced Mar 19, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
menu-bug Addresses menu positioning, scrolling, or general interactions pr/enhancement PRs that are specifically enhancing the project pr/needs-review PRs that need to be reviewed to determine outcome
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants