Skip to content

Conversation

@thatblindgeye
Copy link
Contributor

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
Copy link
Contributor

patternfly-build commented Jul 25, 2023

@thatblindgeye thatblindgeye marked this pull request as ready for review July 25, 2023 18:43
Comment on lines 409 to 431
checkCanFocusTrap: (containers) => new Promise((resolve) => {
const interval = setInterval(() => {
if (containers.every((container) => getComputedStyle(container).visibility !== 'hidden')) {
resolve();
clearInterval(interval);
}
}, 10);
}),
Copy link
Contributor Author

Choose a reason for hiding this comment

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

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.

@thatblindgeye thatblindgeye changed the base branch from main to postV5 July 26, 2023 18:47
@thatblindgeye thatblindgeye force-pushed the iss9205_datepickerScrollBug branch from da6b67d to a6c2956 Compare July 26, 2023 19:22
@thatblindgeye thatblindgeye changed the base branch from postV5 to main July 31, 2023 18:22
@thatblindgeye thatblindgeye force-pushed the iss9205_datepickerScrollBug branch from a6c2956 to 9907582 Compare July 31, 2023 18:31
@thatblindgeye thatblindgeye force-pushed the iss9205_datepickerScrollBug branch from df45076 to 14b48d2 Compare August 8, 2023 18:56
@tlabaj tlabaj added the A11y label Aug 9, 2023
Copy link
Contributor

@nicolethoen nicolethoen left a comment

Choose a reason for hiding this comment

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

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 thatblindgeye force-pushed the iss9205_datepickerScrollBug branch from 14b48d2 to 5884ec0 Compare August 14, 2023 12:40
@thatblindgeye
Copy link
Contributor Author

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

@thatblindgeye 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
* 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>
@thatblindgeye thatblindgeye force-pushed the iss9205_datepickerScrollBug branch from 0c901a8 to f9f2cc9 Compare August 23, 2023 12:29
@tlabaj tlabaj merged commit 3707ffb into patternfly:main Aug 23, 2023
nicolethoen pushed a commit to Kells512/patternfly-react that referenced this pull request Sep 1, 2023
* 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bug - Date picker - Opening the calendar for a second time randomly scrolls page

5 participants