🎨🔨 Re-adjust the height of TimePicker on Calendar resize due to number of days

Closes #5466

Author: balajis-qb

src/test/test_utils.ts

@@ -123,6 +123,26 @@ export const safeQuerySelectorAll = <T extends HTMLElement = HTMLElement>(
   return elements;
 };
 
+export const setupMockResizeObserver = () => {
+  const mockObserve = jest.fn();
+  const mockDisconnect = jest.fn();
+  const mockUnobserve = jest.fn();
+
+  const ResizeObserverMock = jest.fn(() => ({
+    observe: mockObserve,
+    disconnect: mockDisconnect,
+    unobserve: jest.fn(),
+  }));
+
+  global.ResizeObserver = ResizeObserverMock;
+
+  return {
+    observe: mockObserve,
+    disconnect: mockDisconnect,
+    unobserve: mockUnobserve,
+  };
+};
+
 export class SafeElementWrapper<T extends HTMLElement> {
   constructor(private element: T) {}
 

src/test/timepicker_test.test.tsx

@@ -9,6 +9,7 @@ import {
   SafeElementWrapper,
   safeQuerySelector,
   safeQuerySelectorAll,
+  setupMockResizeObserver,
 } from "./test_utils";
 
 const MIN_TIME_LI_LEN = 2;
@@ -19,10 +20,55 @@ describe("TimePicker", () => {
   let onChangeMoment: Date | undefined;
   let instance: DatePicker | null = null;
 
+  let mockObserve: jest.Mock, mockDisconnect: jest.Mock;
+
+  beforeAll(() => {
+    const { observe, disconnect } = setupMockResizeObserver();
+    mockObserve = observe;
+    mockDisconnect = disconnect;
+  });
+
   beforeEach(() => {
     div = document.createElement("div");
   });
 
+  describe("Re-adjust height on Calendar Height Change", () => {
+    beforeEach(() => {
+      mockObserve.mockReset();
+      mockDisconnect.mockReset();
+    });
+
+    it("calls observe on mount", async () => {
+      render(
+        <DatePicker
+          inline
+          selected={new Date()}
+          showTimeSelect
+          timeIntervals={15}
+        />,
+      );
+      await waitFor(() => {
+        expect(mockObserve).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    it("calls disconnect on unmount", async () => {
+      const component = render(
+        <DatePicker
+          inline
+          selected={new Date()}
+          showTimeSelect
+          timeIntervals={15}
+        />,
+      );
+
+      component.unmount();
+      await waitFor(() => {
+        expect(mockDisconnect).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+
   it("should update on input time change", () => {
     renderDatePicker("February 28, 2018 4:43 PM");
     expect(getInputString()).toBe("February 28, 2018 4:43 PM");

src/time.tsx

@@ -62,18 +62,19 @@ export default class Time extends Component<TimeProps, TimeState> {
     );
   };
 
+  private resizeObserver?: ResizeObserver;
   state: TimeState = {
     height: null,
   };
 
   componentDidMount(): void {
     // code to ensure selected time will always be in focus within time window when it first appears
     this.scrollToTheSelectedTime();
-    if (this.props.monthRef && this.header) {
-      this.setState({
-        height: this.props.monthRef.clientHeight - this.header.clientHeight,
-      });
-    }
+    this.observeDatePickerHeightChanges();
+  }
+
+  componentWillUnmount(): void {
+    this.resizeObserver?.disconnect();
   }
 
   private header?: HTMLDivElement;
@@ -82,6 +83,27 @@ export default class Time extends Component<TimeProps, TimeState> {
 
   private centerLi?: HTMLLIElement;
 
+  private observeDatePickerHeightChanges(): void {
+    const { monthRef } = this.props;
+    this.updateContainerHeight();
+
+    if (monthRef) {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.updateContainerHeight();
+      });
+
+      this.resizeObserver.observe(monthRef);
+    }
+  }
+
+  private updateContainerHeight(): void {
+    if (this.props.monthRef && this.header) {
+      this.setState({
+        height: this.props.monthRef.clientHeight - this.header.clientHeight,
+      });
+    }
+  }
+
   scrollToTheSelectedTime = (): void => {
     requestAnimationFrame((): void => {
       if (!this.list) return;