From 941068e61c61ec5b38cd40890069bd45c29fc6dc Mon Sep 17 00:00:00 2001 From: Harminder Singh Date: Wed, 7 Dec 2022 09:46:26 +0530 Subject: [PATCH 1/2] bugfix:removed useConstant hook for initial value in timepicker --- packages/react/src/components/TimePicker/TimePicker.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react/src/components/TimePicker/TimePicker.tsx b/packages/react/src/components/TimePicker/TimePicker.tsx index 833e5dd66252ad..afe5010fb52fb7 100644 --- a/packages/react/src/components/TimePicker/TimePicker.tsx +++ b/packages/react/src/components/TimePicker/TimePicker.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { useConst } from '@fluentui/react-hooks'; import { KeyCodes } from '../../Utilities'; import { TimeConstants, @@ -52,7 +51,7 @@ export const TimePicker: React.FunctionComponent = ({ const optionsCount = getDropdownOptionsCount(increments, timeRange); - const initialValue = useConst(defaultValue || new Date()); + const initialValue = defaultValue || new Date(); const baseDate: Date = React.useMemo(() => generateBaseDate(increments, timeRange, initialValue), [ increments, timeRange, From 08c7ea70b91f6fa947a96cccbeba8cf98b551b3d Mon Sep 17 00:00:00 2001 From: Harminder Singh Date: Wed, 14 Dec 2022 20:25:39 +0530 Subject: [PATCH 2/2] useConst replaced with useControllableValue hook as useConst does not update the initialValue for controlled TimePicker --- ...luentui-react-fcd794a8-7856-4526-a422-5594334da599.json | 7 +++++++ packages/react/src/components/TimePicker/TimePicker.tsx | 5 +++-- 2 files changed, 10 insertions(+), 2 deletions(-) create mode 100644 change/@fluentui-react-fcd794a8-7856-4526-a422-5594334da599.json diff --git a/change/@fluentui-react-fcd794a8-7856-4526-a422-5594334da599.json b/change/@fluentui-react-fcd794a8-7856-4526-a422-5594334da599.json new file mode 100644 index 00000000000000..923f228bd94a79 --- /dev/null +++ b/change/@fluentui-react-fcd794a8-7856-4526-a422-5594334da599.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "In Timepicker intialValue const used the useConst hook which does not update the initial value of the timepicker if the TimePicker receive updated date via props", + "packageName": "@fluentui/react", + "email": "harminder_Sethi@outlook.com", + "dependentChangeType": "patch" +} diff --git a/packages/react/src/components/TimePicker/TimePicker.tsx b/packages/react/src/components/TimePicker/TimePicker.tsx index afe5010fb52fb7..2e4d281a29caec 100644 --- a/packages/react/src/components/TimePicker/TimePicker.tsx +++ b/packages/react/src/components/TimePicker/TimePicker.tsx @@ -7,6 +7,7 @@ import { ceilMinuteToIncrement, getDateFromTimeSelection, } from '@fluentui/date-time-utilities'; +import { useControllableValue } from '@fluentui/react-hooks'; import { ComboBox } from '../../ComboBox'; import type { IComboBox, IComboBoxOption } from '../../ComboBox'; import type { ITimePickerProps, ITimeRange, ITimePickerStrings } from './TimePicker.types'; @@ -51,8 +52,8 @@ export const TimePicker: React.FunctionComponent = ({ const optionsCount = getDropdownOptionsCount(increments, timeRange); - const initialValue = defaultValue || new Date(); - const baseDate: Date = React.useMemo(() => generateBaseDate(increments, timeRange, initialValue), [ + const [initialValue] = useControllableValue(defaultValue, new Date()); + const baseDate: Date = React.useMemo(() => generateBaseDate(increments, timeRange, initialValue as Date), [ increments, timeRange, initialValue,