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

thatblindgeye · tlabaj · Titani · nicolethoen · commit a7d3ada29aa4 · 2023-08-31T22:48:09.000-04:00
* 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>
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>
+);
