Drawer bug typeerror on resize (patternfly#7531)

* bug(Drawer): uncaught type error on resize

* add test to prevent regression

* refactor bugfix to a solution that better addresses the root problem

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

@@ -30,6 +30,7 @@ export interface DrawerContextProps {
   onExpand?: () => void;
   position?: string;
   drawerRef?: React.RefObject<HTMLDivElement>;
+  drawerContentRef?: React.RefObject<HTMLDivElement>;
   isInline: boolean;
 }
 
@@ -39,6 +40,7 @@ export const DrawerContext = React.createContext<Partial<DrawerContextProps>>({
   onExpand: () => {},
   position: 'right',
   drawerRef: null,
+  drawerContentRef: null,
   isInline: false
 });
 
@@ -53,8 +55,10 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
   ...props
 }: DrawerProps) => {
   const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerContentRef = React.useRef<HTMLDivElement>();
+
   return (
-    <DrawerContext.Provider value={{ isExpanded, isStatic, onExpand, position, drawerRef, isInline }}>
+    <DrawerContext.Provider value={{ isExpanded, isStatic, onExpand, position, drawerRef, drawerContentRef, isInline }}>
       <div
         className={css(
           styles.drawer,

packages/react-core/src/components/Drawer/DrawerContent.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
 import { DrawerMain } from './DrawerMain';
-import { DrawerColorVariant } from './Drawer';
+import { DrawerColorVariant, DrawerContext } from './Drawer';
 
 export interface DrawerContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the Drawer. */
@@ -23,7 +23,8 @@ export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
   colorVariant = DrawerColorVariant.default,
   ...props
 }: DrawerContentProps) => {
-  const drawerContentRef = React.useRef<HTMLDivElement>();
+  const { drawerContentRef } = React.useContext(DrawerContext);
+
   return (
     <DrawerMain>
       <div
@@ -37,7 +38,7 @@ export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
       >
         {children}
       </div>
-      {panelContent && React.cloneElement(panelContent as React.ReactElement, { drawerContentRef })}
+      {panelContent}
     </DrawerMain>
   );
 };

packages/react-core/src/components/Drawer/DrawerPanelContent.tsx

@@ -37,8 +37,6 @@ export interface DrawerPanelContentProps extends React.HTMLProps<HTMLDivElement>
   };
   /** Color variant of the background of the drawer panel */
   colorVariant?: DrawerColorVariant | 'light-200' | 'default';
-  /** @hide Internal ref to drawer content */
-  drawerContentRef?: React.RefObject<HTMLDivElement>;
 }
 let isResizing: boolean = null;
 let newSize: number = 0;
@@ -57,13 +55,14 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   resizeAriaLabel = 'Resize',
   widths,
   colorVariant = DrawerColorVariant.default,
-  drawerContentRef,
   ...props
 }: DrawerPanelContentProps) => {
   const panel = React.useRef<HTMLDivElement>();
   const splitterRef = React.useRef<HTMLDivElement>();
   const [separatorValue, setSeparatorValue] = React.useState(0);
-  const { position, isExpanded, isStatic, onExpand, drawerRef, isInline } = React.useContext(DrawerContext);
+  const { position, isExpanded, isStatic, onExpand, drawerRef, drawerContentRef, isInline } = React.useContext(
+    DrawerContext
+  );
   const hidden = isStatic ? false : !isExpanded;
   const [isExpandedInternal, setIsExpandedInternal] = React.useState(!hidden);
   let currWidth: number = 0;

packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx

@@ -10,7 +10,8 @@ import {
   DrawerPanelContent
 } from '../';
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 Object.values([
   { isExpanded: true, isInline: false, isStatic: false },
@@ -124,3 +125,39 @@ test(`Drawer has resizable callback and id`, () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Resizeable DrawerPanelContent can be wrapped in a context without causing an error', () => {
+  const TestContext = React.createContext({});
+
+  const consoleError = jest.spyOn(console, 'error').mockImplementation();
+
+  const panelContent = (
+    <TestContext.Provider value={{}}>
+      <DrawerPanelContent
+        isResizable
+      >
+        <DrawerHead>
+          <span>
+            drawer-panel
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    </TestContext.Provider>
+  );
+
+  render(
+    <Drawer isExpanded={true} position="left">
+      <DrawerContent panelContent={panelContent}>
+        <DrawerContentBody>Drawer content text</DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+
+  userEvent.tab();
+  userEvent.keyboard('{arrowleft}');
+
+  expect(consoleError).not.toHaveBeenCalled();
+})

packages/react-core/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerContent.test.tsx.snap

@@ -12,9 +12,7 @@ exports[`DrawerContent should match snapshot (auto-generated) 1`] = `
         ReactNode
       </div>
     </div>
-    <div
-      drawercontentref="[object Object]"
-    >
+    <div>
       test
     </div>
   </div>