fix(Timepicker-compat): clearIcon not working in freeform (microsoft#…

…31324)
miroslavstastny · Jun 14, 2024 · b801f0f · b801f0f
1 parent de6c175
commit b801f0f
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 3 deletions.
diff --git a/change/@fluentui-react-timepicker-compat-00fd78ea-085d-471c-8c90-5b7cc813e4fb.json b/change/@fluentui-react-timepicker-compat-00fd78ea-085d-471c-8c90-5b7cc813e4fb.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: clear icon not working with freeform",
+  "packageName": "@fluentui/react-timepicker-compat",
+  "email": "yuanboxue@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/...ages/react-components/react-timepicker-compat/src/components/TimePicker/TimePicker.cy.tsx b/...ages/react-components/react-timepicker-compat/src/components/TimePicker/TimePicker.cy.tsx
@@ -9,7 +9,7 @@ const mount = (element: JSX.Element) => {
   mountBase(<FluentProvider theme={teamsLightTheme}>{element}</FluentProvider>);
 };
 
-const Default = ({ freeform }: Pick<TimePickerProps, 'freeform'>) => {
+const Default = ({ freeform, clearable }: Pick<TimePickerProps, 'freeform' | 'clearable'>) => {
   const [selectedTimeText, setSelectedTimeText] = React.useState<string | undefined>(undefined);
   const onTimeChange: TimePickerProps['onTimeChange'] = (_ev, data) => {
     setSelectedTimeText(data.selectedTimeText);
@@ -18,6 +18,7 @@ const Default = ({ freeform }: Pick<TimePickerProps, 'freeform'>) => {
     <div>
       <TimePicker
         freeform={freeform}
+        clearable={clearable}
         startHour={10}
         endHour={20}
         increment={60}
@@ -29,7 +30,7 @@ const Default = ({ freeform }: Pick<TimePickerProps, 'freeform'>) => {
   );
 };
 
-const Controlled = ({ freeform }: Pick<TimePickerProps, 'freeform'>) => {
+const Controlled = ({ freeform, clearable }: Pick<TimePickerProps, 'freeform' | 'clearable'>) => {
   const [selectedTime, setSelectedTime] = React.useState<Date | null>(null);
   const [selectedTimeText, setSelectedTimeText] = React.useState<string | undefined>(undefined);
   const [value, setValue] = React.useState<string>('');
@@ -47,6 +48,7 @@ const Controlled = ({ freeform }: Pick<TimePickerProps, 'freeform'>) => {
     <div>
       <TimePicker
         freeform={freeform}
+        clearable={clearable}
         startHour={10}
         endHour={20}
         increment={60}
@@ -63,6 +65,7 @@ const Controlled = ({ freeform }: Pick<TimePickerProps, 'freeform'>) => {
 
 const inputSelector = '[role="combobox"]';
 const optionSelector = (index: number) => `[role="option"]:nth-of-type(${index + 1})`;
+const clearIconSelector = '.fui-Combobox__clearIcon';
 
 describe('TimePicker', () => {
   [
@@ -143,6 +146,22 @@ describe('TimePicker', () => {
         cy.get('#selected-time-text').should('have.text', '10:30');
       });
     });
+
+    describe('clearable', () => {
+      it(`${name} should clear input on clear icon click`, () => {
+        mount(<Example clearable />);
+        cy.get(inputSelector).click().realPress('Enter').get(inputSelector).should('have.value', '10:00');
+        cy.get(clearIconSelector).click().get(inputSelector).should('have.value', '');
+        cy.get('#selected-time-text').should('have.text', '');
+      });
+
+      it(`freeform ${name} should clear input on clear icon click`, () => {
+        mount(<Example clearable freeform />);
+        cy.get(inputSelector).click().type('14{enter}').get(inputSelector).should('have.value', '14:00');
+        cy.get(clearIconSelector).click().get(inputSelector).should('have.value', '');
+        cy.get('#selected-time-text').should('have.text', '');
+      });
+    });
   });
 });
 

diff --git a/...ages/react-components/react-timepicker-compat/src/components/TimePicker/useTimePicker.tsx b/...ages/react-components/react-timepicker-compat/src/components/TimePicker/useTimePicker.tsx
@@ -83,8 +83,13 @@ export const useTimePicker_unstable = (props: TimePickerProps, ref: React.Ref<HT
     return selectedOption ? [selectedOption.key] : [];
   }, [options, selectedTime]);
 
+  const clearIconRef = React.useRef<HTMLSpanElement>(null);
   const handleOptionSelect: ComboboxProps['onOptionSelect'] = useEventCallback((e, data) => {
-    if (freeform && data.optionValue === undefined) {
+    if (
+      freeform &&
+      data.optionValue === undefined &&
+      !(rest.clearable && e.type === 'click' && e.currentTarget === clearIconRef.current)
+    ) {
       // Combobox clears selection when input value not matching any option; but we allow this case in freeform TimePicker.
       return;
     }
@@ -117,8 +122,15 @@ export const useTimePicker_unstable = (props: TimePickerProps, ref: React.Ref<HT
     [dateEndAnchor, dateStartAnchor, hourCycle, showSeconds],
   );
 
+  const mergedClearIconRef = useMergedRefs(baseState.clearIcon?.ref, clearIconRef);
   const state: TimePickerState = {
     ...baseState,
+    clearIcon: baseState.clearIcon
+      ? {
+          ...baseState.clearIcon,
+          ref: mergedClearIconRef,
+        }
+      : undefined,
     freeform,
     parseTimeStringToDate: parseTimeStringToDateInProps ?? defaultParseTimeStringToDate,
     submittedText,