fix(DatePicker): resolved page scrolling bug (#9401)

* Rebase postv5 (#9393) * chore(deps): bump docs framework (#9370) * chore(docs): Updated screenshots (#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 (#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 (#9387) * fix(fileupload): use default readonly text input instead of plain * chore(build): snaps * fix(CodeEditor): prevent clicks in textarea from opening fileupload (#9385) * fix(toolbar): added chip container class to toolbar content (#9379) * feat(Menu): added support for tooltips to menu (#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 (#9355) * chore(TreeView): converted examples to TS (#9286) * fix(ExpandableSection): added ARIA attributes (#9303) * fix(ExpandableSection): added ARIA attributes * Updated failing snapshots due to mismatching generated ID * chore(Tooltip): updated unit tests (#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 (#9262) * chore(Card): added tests for new clickable/selectable * Added tests for clickable cards * Updated card with actions test * fix(Slider): reverted taborder (#9293) * fix(chore): Fix deprecated wizard integration tests (#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>
patternfly · Aug 23, 2023 · 3707ffb · 3707ffb
1 parent 09d128f
commit 3707ffb
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 5 deletions.
diff --git a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
@@ -180,11 +180,8 @@ export const CalendarMonth = ({
 
  useEffect(() => {
  // Calendar month should not be focused on page load
- // Datepicker should place focus in calendar month when opened
  if ((shouldFocus || isDateFocused) && focusedDateValidated && focusRef.current) {
  focusRef.current.focus();
- } else {
- setShouldFocus(true);
  }
  }, [focusedDate, isDateFocused, focusedDateValidated, focusRef]);
 

diff --git a/packages/react-core/src/components/DatePicker/DatePicker.tsx b/packages/react-core/src/components/DatePicker/DatePicker.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DatePicker/date-picker';
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
+import calendarMonthStyles from '@patternfly/react-styles/css/components/CalendarMonth/calendar-month';
 import { TextInput, TextInputProps } from '../TextInput/TextInput';
 import { Popover, PopoverProps } from '../Popover/Popover';
 import { InputGroup, InputGroupItem } from '../InputGroup';
@@ -214,9 +215,15 @@ const DatePickerBase = (
  [setPopoverOpen, popoverOpen, selectOpen]
  );
 
+ const createFocusSelectorString = (modifierClass: string) =>
+ `.${calendarMonthStyles.calendarMonthDatesCell}.${modifierClass} .${calendarMonthStyles.calendarMonthDate}`;
+ const focusSelectorForSelectedDate = createFocusSelectorString(calendarMonthStyles.modifiers.selected);
+ const focusSelectorForUnselectedDate = createFocusSelectorString(calendarMonthStyles.modifiers.current);
+
  return (
  <div className={css(styles.datePicker, className)} ref={datePickerWrapperRef} style={style} {...props}>
  <Popover
+ elementToFocus={valueDate ? focusSelectorForSelectedDate : focusSelectorForUnselectedDate}
  position="bottom"
  bodyContent={
  <CalendarMonth
@@ -232,7 +239,6 @@ const DatePickerBase = (
  dayFormat={dayFormat}
  weekStart={weekStart}
  rangeStart={rangeStart}
- isDateFocused
  />
  }
  showClose={false}

diff --git a/packages/react-core/src/components/Popover/Popover.tsx b/packages/react-core/src/components/Popover/Popover.tsx
@@ -78,6 +78,10 @@ export interface PopoverProps {
  closeBtnAriaLabel?: string;
  /** Distance of the popover to its target. Defaults to 25. */
  distance?: number;
+ /** The element to focus when the popover becomes visible. By default the first
+ * focusable element will receive focus.
+ */
+ elementToFocus?: HTMLElement | SVGElement | string;
  /**
  * If true, tries to keep the popover in view by flipping it if necessary.
  * If the position is set to 'auto', this prop is ignored.
@@ -269,6 +273,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
  triggerRef,
  hasNoPadding = false,
  hasAutoWidth = false,
+ elementToFocus,
  ...rest
 }: PopoverProps) => {
  // could make this a prop in the future (true | false | 'toggle')
@@ -285,7 +290,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
  React.useEffect(() => {
  if (triggerManually) {
  if (isVisible) {
- show();
+ show(undefined, true);
  } else {
  hide();
  }
@@ -404,13 +409,26 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
  hide(event);
  }
  };
+
  const content = (
  <FocusTrap
  ref={popoverRef}
  active={focusTrapActive}
  focusTrapOptions={{
  returnFocusOnDeactivate: true,
  clickOutsideDeactivates: true,
+ // FocusTrap's initialFocus can accept false as a value to prevent initial focus.
+ // We want to prevent this in case false is ever passed in.
+ initialFocus: elementToFocus || undefined,
+ checkCanFocusTrap: (containers) =>
+ new Promise((resolve) => {
+ const interval = setInterval(() => {
+ if (containers.every((container) => getComputedStyle(container).visibility !== 'hidden')) {
+ resolve();
+ clearInterval(interval);
+ }
+ }, 10);
+ }),
  tabbableOptions: { displayCheck: 'none' },
 
  fallbackFocus: () => {

diff --git a/packages/react-core/src/components/Popover/examples/Popover.md b/packages/react-core/src/components/Popover/examples/Popover.md
@@ -89,3 +89,11 @@ Here the popover goes over the navigation, so the prop `appendTo` is set to the
 ```ts file="./PopoverAlert.tsx"
 
 ```
+
+### Custom focus
+
+Use the `elementToFocus` property to customize which element inside the Popover receives focus when opened.
+
+```ts file="./PopoverCustomFocus.tsx"
+
+```
diff --git a/packages/react-core/src/components/Popover/examples/PopoverCustomFocus.tsx b/packages/react-core/src/components/Popover/examples/PopoverCustomFocus.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Popover, Button } from '@patternfly/react-core';
+
+export const PopoverCustomFocus: React.FunctionComponent = () => (
+ <Popover
+ elementToFocus="#popover-cancel-button"
+ showClose={false}
+ aria-label="Popover with custom focus"
+ headerContent={<div>Popover header</div>}
+ bodyContent={
+ <div>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit.{' '}
+ <Button
+ // Preventing default click behavior for example purposes only
+ onClick={(event: React.MouseEvent) => event.preventDefault()}
+ component="a"
+ isInline
+ variant="link"
+ href="#basic"
+ >
+ View the basic example
+ </Button>
+ </div>
+ }
+ footerContent={(hide) => (
+ <Button onClick={hide} variant="secondary" id="popover-cancel-button">
+ Cancel
+ </Button>
+ )}
+ >
+ <Button>Toggle popover with custom focus</Button>
+ </Popover>
+);