Merge pull request #187 from MetroStar/date-picker-rerender-fix

Fix DatePicker duplication bug
MetroStar · Jun 26, 2024 · 57780ef · 57780ef
2 parents 338d5de + 2cd0601
commit 57780ef
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/comet-uswds/package.json b/packages/comet-uswds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@metrostar/comet-uswds",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "React with TypeScript Component Library based on USWDS 3.0.",
   "license": "Apache-2.0",
   "main": "./dist/cjs/index.js",

diff --git a/packages/comet-uswds/src/components/date-picker/date-picker.tsx b/packages/comet-uswds/src/components/date-picker/date-picker.tsx
@@ -53,8 +53,12 @@ export const DatePicker = ({
   const datePickerRef = useRef<HTMLDivElement>(null);
 
   useLayoutEffect(() => {
-    const datePickerElement = datePickerRef.current as HTMLInputElement;
-    datePicker.on(datePickerElement);
+    const datePickerElement = datePickerRef.current as HTMLDivElement;
+    const datePickerWrapper = datePickerElement.querySelector(
+      '.usa-date-picker__wrapper',
+    ) as HTMLDivElement;
+    if (!datePickerWrapper) datePicker.on(datePickerElement);
+
     const externalInput = datePicker.getDatePickerContext(datePickerElement).externalInputEl;
     if (onChange) {
       externalInput.addEventListener('change', onChange);
@@ -63,9 +67,10 @@ export const DatePicker = ({
       if (onChange) {
         externalInput.removeEventListener('change', onChange);
       }
-      datePicker.off(datePickerElement);
+      /* v8 ignore next */
+      if (datePickerWrapper) datePicker.off(datePickerElement);
     };
-  });
+  }, []);
 
   const datePickerAttributes: DatePickerAttributes = {};
   if (minDate) datePickerAttributes['data-min-date'] = getDateString(minDate);