From a3a6b6736d2f97bee13c854d8ac98f22b7f9a5ed Mon Sep 17 00:00:00 2001 From: Johnny Bouder Date: Wed, 26 Jun 2024 12:18:17 -0400 Subject: [PATCH 1/2] Fix date picker rerender issue. Update comet-uswds to next patch version. --- package-lock.json | 2 +- packages/comet-uswds/package.json | 2 +- .../src/components/date-picker/date-picker.tsx | 11 ++++++++--- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index d34562d2..37ebbc96 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18803,7 +18803,7 @@ }, "packages/comet-uswds": { "name": "@metrostar/comet-uswds", - "version": "2.1.1", + "version": "2.1.2", "license": "Apache-2.0", "dependencies": { "@uswds/uswds": "3.8.1", diff --git a/packages/comet-uswds/package.json b/packages/comet-uswds/package.json index e58ba3b7..216e5bbd 100644 --- 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 index 5711d48a..20e6dcc8 100644 --- a/packages/comet-uswds/src/components/date-picker/date-picker.tsx +++ b/packages/comet-uswds/src/components/date-picker/date-picker.tsx @@ -54,7 +54,11 @@ export const DatePicker = ({ useLayoutEffect(() => { const datePickerElement = datePickerRef.current as HTMLInputElement; - datePicker.on(datePickerElement); + const datePickerWrapper = datePickerElement.querySelector( + '.usa-date-picker__wrapper', + ) as HTMLInputElement; + 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); From 2cd0601803cbc821eac8694ebd8e16c957fa931f Mon Sep 17 00:00:00 2001 From: Johnny Bouder Date: Wed, 26 Jun 2024 12:34:31 -0400 Subject: [PATCH 2/2] Update element types. --- .../comet-uswds/src/components/date-picker/date-picker.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/comet-uswds/src/components/date-picker/date-picker.tsx b/packages/comet-uswds/src/components/date-picker/date-picker.tsx index 20e6dcc8..9c835699 100644 --- a/packages/comet-uswds/src/components/date-picker/date-picker.tsx +++ b/packages/comet-uswds/src/components/date-picker/date-picker.tsx @@ -53,10 +53,10 @@ export const DatePicker = ({ const datePickerRef = useRef(null); useLayoutEffect(() => { - const datePickerElement = datePickerRef.current as HTMLInputElement; + const datePickerElement = datePickerRef.current as HTMLDivElement; const datePickerWrapper = datePickerElement.querySelector( '.usa-date-picker__wrapper', - ) as HTMLInputElement; + ) as HTMLDivElement; if (!datePickerWrapper) datePicker.on(datePickerElement); const externalInput = datePicker.getDatePickerContext(datePickerElement).externalInputEl;