fix(DatePicker): resolved page scrolling bug #9401

thatblindgeye · 2023-07-25T18:16:06Z

What: Closes #9205

Also resolved a bug where DatePicker wasn't properly trapping focus
CalendarMonth no longer handles focusing the date when the popover opens; instead the FocusTrap internal to Popover handles this
Added a new Popover example to show custom focus

Had a couple alternative approaches, but this seemed a little more flexible and utilized some of FocusTrap's built in functionality rather than trying to get CalendarMonth to handle focus correctly.

I originally tested these updates based off of #9339 and things looked good with the changes made there.

Additional issues:

patternfly-build · 2023-07-25T18:24:27Z

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

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

thatblindgeye · 2023-07-26T12:41:04Z

packages/react-core/src/components/Popover/Popover.tsx

+ checkCanFocusTrap: (containers) => new Promise((resolve) => {
+ const interval = setInterval(() => {
+ if (containers.every((container) => getComputedStyle(container).visibility !== 'hidden')) {
+ resolve();
+ clearInterval(interval);
+ }
+ }, 10);
+ }),


An alternative to this is delaying when the focus trap is set to active via timeout, but that causes a delay between clicking the button to open the Popover and the element inside Popover receiving focus. Using this which is similar to something the focus-trap docs show in a demo prevents such a delay.

nicolethoen

The only odd thing I'm noticing when interacting with the datepicker with keyboard, is that after I've selected a date and open the datepicker calendar again, it autofocuses on today rather than the day I had selected.

thatblindgeye · 2023-08-14T12:59:05Z

@nicolethoen ah good catch, it should now be getting the correct selector depending on whether a date has been selected or not.

* 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>

* 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(DatePicker): resolved page scrolling bug * Updated snapshots after rebase * Fixed wrong date being focused after selection * Fixed linting errors --------- 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>

thatblindgeye marked this pull request as ready for review July 25, 2023 18:43

thatblindgeye requested review from jessiehuff and kmcfaul July 25, 2023 19:02

thatblindgeye commented Jul 26, 2023

View reviewed changes

thatblindgeye changed the base branch from main to postV5 July 26, 2023 18:47

thatblindgeye force-pushed the iss9205_datepickerScrollBug branch from da6b67d to a6c2956 Compare July 26, 2023 19:22

kmcfaul approved these changes Jul 26, 2023

View reviewed changes

thatblindgeye changed the base branch from postV5 to main July 31, 2023 18:22

thatblindgeye force-pushed the iss9205_datepickerScrollBug branch from a6c2956 to 9907582 Compare July 31, 2023 18:31

thatblindgeye force-pushed the iss9205_datepickerScrollBug branch from df45076 to 14b48d2 Compare August 8, 2023 18:56

tlabaj added the accessibility label Aug 9, 2023

nicolethoen reviewed Aug 9, 2023

View reviewed changes

thatblindgeye force-pushed the iss9205_datepickerScrollBug branch from 14b48d2 to 5884ec0 Compare August 14, 2023 12:40

thatblindgeye force-pushed the iss9205_datepickerScrollBug branch from ee375be to 0c901a8 Compare August 21, 2023 18:58

tlabaj and others added 5 commits August 23, 2023 08:26

fix(DatePicker): resolved page scrolling bug

b019fcd

Updated snapshots after rebase

9130aa8

Fixed wrong date being focused after selection

7238eef

Fixed linting errors

f9f2cc9

thatblindgeye force-pushed the iss9205_datepickerScrollBug branch from 0c901a8 to f9f2cc9 Compare August 23, 2023 12:29

tlabaj approved these changes Aug 23, 2023

View reviewed changes

nicolethoen approved these changes Aug 23, 2023

View reviewed changes

tlabaj merged commit 3707ffb into patternfly:main Aug 23, 2023
10 checks passed

renovate bot mentioned this pull request Jan 10, 2024

chore(deps): update patternfly patternfly-extension-testing/react-catalog-view#20

Closed

1 task

renovate bot mentioned this pull request Mar 27, 2024

chore(deps): update patternfly patternfly-extension-testing/lib-ui#15

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(DatePicker): resolved page scrolling bug #9401

fix(DatePicker): resolved page scrolling bug #9401

thatblindgeye commented Jul 25, 2023

patternfly-build commented Jul 25, 2023 •

edited

Loading

thatblindgeye Jul 26, 2023

nicolethoen left a comment

thatblindgeye commented Aug 14, 2023

fix(DatePicker): resolved page scrolling bug #9401

fix(DatePicker): resolved page scrolling bug #9401

Conversation

thatblindgeye commented Jul 25, 2023

patternfly-build commented Jul 25, 2023 • edited Loading

thatblindgeye Jul 26, 2023

Choose a reason for hiding this comment

nicolethoen left a comment

Choose a reason for hiding this comment

thatblindgeye commented Aug 14, 2023

patternfly-build commented Jul 25, 2023 •

edited

Loading