Fluentui: Selected Suggestions items not visible after scrolling down

[PratikDeshpande]

Background:

I am a software developer at Bloomberg. We use this library for some of our web products. I discovered a small bug in the Suggestions component.

If the suggestions parameter has a list of suggestions that is greater than the resultsMaximumNumber parameter, users can not scroll through the list of suggestions. This can cause potential accesibility issues.

I have already created a draft PR to fix the issue. I searched through the existing PRs and Issues to make sure this issue wasn't reported before.

Instructions to replicate:

suggestions param: list of N SuggestionsItem where N is more than the resultsMaximumNumber param.
When scrolling down the list of suggestions, if the selection index goes beyond resultsMaximumNumber, the selected item will not be visible. (See screenshots)

This can cause accesibility issues because the user can not access all the options using just the keyboard.
https://github.com/OfficeDev/office-ui-fabric-react/pull/8275

Environment Information

• __Package version(s)__: office-ui-fabric-react 6.155.0 (latest)
• __Browser and OS versions__: Irrelevant

Please provide a reproduction of the bug in a codepen:

Actual behavior:

Selection is on index 0

Selection is on index 3.

The suggestions to display are sliced based on index 0 and resultsMaximumNumber, rather than the selected suggestion index

Expected behavior:

With the fix, the suggestions to display are sliced based on the current selected index:

This visually creates the impression of scrolling.

Priorities and help requested:

Are you willing to submit a PR to fix?

Yes. The draft PR has already been created: https://github.com/OfficeDev/office-ui-fabric-react/pull/8275
Once I have access to my dev machine I can finish the final step (npm run change) and make a PR.

Requested priority: (Blocking, High, Normal, Low)

Products/sites affected: (if applicable)

[KevinTCoughlin]

Thanks for reporting this @PratikDeshpande. I've assigned you to this issue since you seem to have a handle on this given the draft PR. We'll take a look at your implementation and hopefully get a fixed merge soon 👍.

[PratikDeshpande]

Thanks, @KevinTCoughlin !

[msft-github-bot]

:tada:This issue was addressed in #8275, which has now been successfully released as [email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site