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.

Sign up for GitHub

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

Jump to bottom

fix(Menu): focused items should scrollintoview when overflowed #9408

Merged
merged 5 commits into from
Aug 14, 2023
Merged

fix(Menu): focused items should scrollintoview when overflowed #9408

merged 5 commits into from
Aug 14, 2023

Conversation

kmcfaul
Copy link
Contributor

@kmcfaul kmcfaul commented Jul 26, 2023

What: Closes #8595

When a typeahead menu is navigated using keyboard, actual focus remains on the text input while visual focus is applied to each item. When the items overflow the menu list, keyboard navigation should scroll items into focus if needed.

@patternfly-build
Copy link
Contributor

patternfly-build commented Jul 26, 2023 •
edited
Loading

Preview: https://patternfly-react-pr-9408.surge.sh

A11y report: https://patternfly-react-pr-9408-a11y.surge.sh

thatblindgeye
thatblindgeye reviewed Jul 26, 2023
View reviewed changes
packages/react-core/src/components/Menu/MenuItem.tsx Outdated
const isBelowBottom = itemEl.offsetTop - parentListEl.offsetTop + itemEl.clientHeight;

if (isAboveTop || isBelowBottom) {
itemEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
Copy link
Contributor

Choose a reason for hiding this comment

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

"auto" might be a better option for the behavior (unless we'd want to make this customizable/check if a user has some setting that would trigger the prefers-reduced-motion media query).

When testing the Select typeahead and passing isScrollable, this is the result when traversing through via keyboard then closing/opening after giving focus to the last option:

Select.with.smooth.scrolling.mov

@kmcfaul kmcfaul linked an issue Jul 27, 2023 that may be closed by this pull request
Bug - [Select typeahead] - [When the menu overflows the elements are not scrolling into view while moving down with the keyboard] #8595
Closed
@kmcfaul kmcfaul changed the base branch from postV5 to main July 31, 2023 17:55
tlabaj and others added 2 commits July 31, 2023 14:03
@tlabaj @patternfly-build
@mcoker @gitdallas @dgutride @thatblindgeye @kmcfaul
Rebase postv5 (patternfly#9393)
ceef7a7 
* chore(deps): bump docs framework (patternfly#9370)

* chore(docs): Updated screenshots (patternfly#9337)

* chore(docs): Updated screenshots

* updated screenshots after logo update

---------

Co-authored-by: Titani <tlabaj@redaht.com>

* chore(release): releasing packages [ci skip]

 - @patternfly/react-docs@6.0.0-prerelease.26

* chore(deps): bump to latest chore version (patternfly#9389)

* chore(deps): bump to latest chore version

* bump to 16

* chore(release): releasing packages [ci skip]

 - @patternfly/react-charts@7.0.0-prerelease.12
 - @patternfly/react-code-editor@5.0.0-prerelease.24
 - @patternfly/react-core@5.0.0-prerelease.24
 - @patternfly/react-docs@6.0.0-prerelease.27
 - @patternfly/react-icons@5.0.0-prerelease.9
 - demo-app-ts@5.0.0-prerelease.22
 - @patternfly/react-styles@5.0.0-prerelease.7
 - @patternfly/react-table@5.0.0-prerelease.24
 - @patternfly/react-tokens@5.0.0-prerelease.9

* fix(fileupload): use default readonly text input instead of plain (patternfly#9387)

* fix(fileupload): use default readonly text input instead of plain

* chore(build): snaps

* fix(CodeEditor): prevent clicks in textarea from opening fileupload (patternfly#9385)

* fix(toolbar): added chip container class to toolbar content (patternfly#9379)

* feat(Menu): added support for tooltips to menu (patternfly#9382)

* fix(whitespace): Update readme to trigger release

* chore(release): releasing packages [ci skip]

 - @patternfly/react-code-editor@5.0.0-prerelease.25
 - @patternfly/react-core@5.0.0-prerelease.25
 - @patternfly/react-docs@6.0.0-prerelease.28
 - demo-app-ts@5.0.0-prerelease.23
 - @patternfly/react-table@5.0.0-prerelease.25

* fix(Toolbar): resolved typeerror on full page demo (patternfly#9355)

* chore(TreeView): converted examples to TS (patternfly#9286)

* fix(ExpandableSection): added ARIA attributes (patternfly#9303)

* fix(ExpandableSection): added ARIA attributes

* Updated failing snapshots due to mismatching generated ID

* chore(Tooltip): updated unit tests (patternfly#9295)

* chore(Tooltip): updated unit tests

* Updated mock and tests

* Updated based on Austin feedback

* Updated integration tests

* Removed unused imports

* Updated remaining tests using Popper mock

* Removed extraenous snapshot test

* Removed test

* Split out onTooltipHidden test

* chore(Card): added tests for new clickable/selectable (patternfly#9262)

* chore(Card): added tests for new clickable/selectable

* Added tests for clickable cards

* Updated card with actions test

* fix(Slider): reverted taborder (patternfly#9293)

* fix(chore): Fix deprecated wizard integration tests (patternfly#9312)

* fix(chore): Fix deprecated wizard integration tests

* updated non deprecated test as well

---------

Co-authored-by: Titani <tlabaj@redaht.com>

---------

Co-authored-by: Titani <tlabaj@redaht.com>
Co-authored-by: patternfly-build <patternfly-build@redhat.com>
Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>
Co-authored-by: Dallas <dallas.nicol@gmail.com>
Co-authored-by: Dana Gutride <dgutride@gmail.com>
Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>
@kmcfaul
fix(Menu): focused items should scrollintoview when overflowed
3d650a6
@kmcfaul kmcfaul force-pushed the menu-ta-scrollintoview branch from a9848b5 to 3d650a6 Compare July 31, 2023 18:04
@tlabaj tlabaj requested a review from mmenestr August 2, 2023 13:23
@tlabaj tlabaj merged commit 388cfeb into patternfly:main Aug 14, 2023
nicolethoen pushed a commit to Kells512/patternfly-react that referenced this pull request Sep 1, 2023
@kmcfaul @tlabaj
@patternfly-build @mcoker @gitdallas @dgutride @thatblindgeye @nicolethoen
fix(Menu): focused items should scrollintoview when overflowed (patte…
354549e 
…rnfly#9408)

* Rebase postv5 (patternfly#9393)

* chore(deps): bump docs framework (patternfly#9370)

* chore(docs): Updated screenshots (patternfly#9337)

* chore(docs): Updated screenshots

* updated screenshots after logo update

---------

Co-authored-by: Titani <tlabaj@redaht.com>

* chore(release): releasing packages [ci skip]

 - @patternfly/react-docs@6.0.0-prerelease.26

* chore(deps): bump to latest chore version (patternfly#9389)

* chore(deps): bump to latest chore version

* bump to 16

* chore(release): releasing packages [ci skip]

 - @patternfly/react-charts@7.0.0-prerelease.12
 - @patternfly/react-code-editor@5.0.0-prerelease.24
 - @patternfly/react-core@5.0.0-prerelease.24
 - @patternfly/react-docs@6.0.0-prerelease.27
 - @patternfly/react-icons@5.0.0-prerelease.9
 - demo-app-ts@5.0.0-prerelease.22
 - @patternfly/react-styles@5.0.0-prerelease.7
 - @patternfly/react-table@5.0.0-prerelease.24
 - @patternfly/react-tokens@5.0.0-prerelease.9

* fix(fileupload): use default readonly text input instead of plain (patternfly#9387)

* fix(fileupload): use default readonly text input instead of plain

* chore(build): snaps

* fix(CodeEditor): prevent clicks in textarea from opening fileupload (patternfly#9385)

* fix(toolbar): added chip container class to toolbar content (patternfly#9379)

* feat(Menu): added support for tooltips to menu (patternfly#9382)

* fix(whitespace): Update readme to trigger release

* chore(release): releasing packages [ci skip]

 - @patternfly/react-code-editor@5.0.0-prerelease.25
 - @patternfly/react-core@5.0.0-prerelease.25
 - @patternfly/react-docs@6.0.0-prerelease.28
 - demo-app-ts@5.0.0-prerelease.23
 - @patternfly/react-table@5.0.0-prerelease.25

* fix(Toolbar): resolved typeerror on full page demo (patternfly#9355)

* chore(TreeView): converted examples to TS (patternfly#9286)

* fix(ExpandableSection): added ARIA attributes (patternfly#9303)

* fix(ExpandableSection): added ARIA attributes

* Updated failing snapshots due to mismatching generated ID

* chore(Tooltip): updated unit tests (patternfly#9295)

* chore(Tooltip): updated unit tests

* Updated mock and tests

* Updated based on Austin feedback

* Updated integration tests

* Removed unused imports

* Updated remaining tests using Popper mock

* Removed extraenous snapshot test

* Removed test

* Split out onTooltipHidden test

* chore(Card): added tests for new clickable/selectable (patternfly#9262)

* chore(Card): added tests for new clickable/selectable

* Added tests for clickable cards

* Updated card with actions test

* fix(Slider): reverted taborder (patternfly#9293)

* fix(chore): Fix deprecated wizard integration tests (patternfly#9312)

* fix(chore): Fix deprecated wizard integration tests

* updated non deprecated test as well

---------

Co-authored-by: Titani <tlabaj@redaht.com>

---------

Co-authored-by: Titani <tlabaj@redaht.com>
Co-authored-by: patternfly-build <patternfly-build@redhat.com>
Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>
Co-authored-by: Dallas <dallas.nicol@gmail.com>
Co-authored-by: Dana Gutride <dgutride@gmail.com>
Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>

* fix(Menu): focused items should scrollintoview when overflowed

* fix merge error

* fix merge snap

* change scroll to auto

---------

Co-authored-by: Titani Labaj <39532947+tlabaj@users.noreply.github.com>
Co-authored-by: Titani <tlabaj@redaht.com>
Co-authored-by: patternfly-build <patternfly-build@redhat.com>
Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>
Co-authored-by: Dallas <dallas.nicol@gmail.com>
Co-authored-by: Dana Gutride <dgutride@gmail.com>
Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@thatblindgeye thatblindgeye thatblindgeye approved these changes

@mmenestr mmenestr mmenestr approved these changes

@tlabaj tlabaj tlabaj approved these changes

@wise-king-sullyman wise-king-sullyman wise-king-sullyman approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
6 participants
@kmcfaul @patternfly-build @wise-king-sullyman @tlabaj @mmenestr @thatblindgeye