From 83f117e4ef283c5633bf1dd5af6190300b602f18 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Thu, 9 May 2024 14:48:49 +0200 Subject: [PATCH 1/4] fix --- .../src/components/TimePicker/useTimePicker.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/react-components/react-timepicker-compat/src/components/TimePicker/useTimePicker.tsx b/packages/react-components/react-timepicker-compat/src/components/TimePicker/useTimePicker.tsx index 2b74601cb9d3c..17df843473ae9 100644 --- a/packages/react-components/react-timepicker-compat/src/components/TimePicker/useTimePicker.tsx +++ b/packages/react-components/react-timepicker-compat/src/components/TimePicker/useTimePicker.tsx @@ -83,8 +83,13 @@ export const useTimePicker_unstable = (props: TimePickerProps, ref: React.Ref(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; } @@ -119,6 +124,12 @@ export const useTimePicker_unstable = (props: TimePickerProps, ref: React.Ref Date: Thu, 9 May 2024 14:57:32 +0200 Subject: [PATCH 2/4] cypress --- .../components/TimePicker/TimePicker.cy.tsx | 23 +++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-timepicker-compat/src/components/TimePicker/TimePicker.cy.tsx b/packages/react-components/react-timepicker-compat/src/components/TimePicker/TimePicker.cy.tsx index f3e9e93d91ed7..7f85638aee191 100644 --- a/packages/react-components/react-timepicker-compat/src/components/TimePicker/TimePicker.cy.tsx +++ b/packages/react-components/react-timepicker-compat/src/components/TimePicker/TimePicker.cy.tsx @@ -9,7 +9,7 @@ const mount = (element: JSX.Element) => { mountBase({element}); }; -const Default = ({ freeform }: Pick) => { +const Default = ({ freeform, clearable }: Pick) => { const [selectedTimeText, setSelectedTimeText] = React.useState(undefined); const onTimeChange: TimePickerProps['onTimeChange'] = (_ev, data) => { setSelectedTimeText(data.selectedTimeText); @@ -18,6 +18,7 @@ const Default = ({ freeform }: Pick) => {
) => { ); }; -const Controlled = ({ freeform }: Pick) => { +const Controlled = ({ freeform, clearable }: Pick) => { const [selectedTime, setSelectedTime] = React.useState(null); const [selectedTimeText, setSelectedTimeText] = React.useState(undefined); const [value, setValue] = React.useState(''); @@ -47,6 +48,7 @@ const Controlled = ({ freeform }: Pick) => {
) => { 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(); + 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(); + 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', ''); + }); + }); }); }); From 129fa22e6f4b1b8ccb6e583d78b1d405f231bd19 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Thu, 9 May 2024 14:58:12 +0200 Subject: [PATCH 3/4] chg --- ...picker-compat-00fd78ea-085d-471c-8c90-5b7cc813e4fb.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-timepicker-compat-00fd78ea-085d-471c-8c90-5b7cc813e4fb.json 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 new file mode 100644 index 0000000000000..4b6e7e1b1c0c0 --- /dev/null +++ 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" +} From dcbc7628968ea32010e61b84a245de5b3caf1d8e Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Thu, 9 May 2024 15:56:12 +0200 Subject: [PATCH 4/4] fix condition merge ref --- .../src/components/TimePicker/useTimePicker.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-components/react-timepicker-compat/src/components/TimePicker/useTimePicker.tsx b/packages/react-components/react-timepicker-compat/src/components/TimePicker/useTimePicker.tsx index 17df843473ae9..9fab065c81f0c 100644 --- a/packages/react-components/react-timepicker-compat/src/components/TimePicker/useTimePicker.tsx +++ b/packages/react-components/react-timepicker-compat/src/components/TimePicker/useTimePicker.tsx @@ -122,12 +122,13 @@ export const useTimePicker_unstable = (props: TimePickerProps, ref: React.Ref