From 47051be239325759516007836bdfc62e3fa5bbb6 Mon Sep 17 00:00:00 2001 From: KHMakoto Date: Thu, 27 Oct 2022 15:20:07 -0700 Subject: [PATCH 1/4] fix: Allowing DatePicker to be focusable within FocusZones by default. --- packages/react/src/components/DatePicker/DatePicker.base.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/components/DatePicker/DatePicker.base.tsx b/packages/react/src/components/DatePicker/DatePicker.base.tsx index a8ead22b510983..8b1d5ef162527d 100644 --- a/packages/react/src/components/DatePicker/DatePicker.base.tsx +++ b/packages/react/src/components/DatePicker/DatePicker.base.tsx @@ -454,6 +454,7 @@ export const DatePickerBase: React.FunctionComponent = React.f
Date: Thu, 27 Oct 2022 15:23:04 -0700 Subject: [PATCH 2/4] Adding change file. --- ...luentui-react-fd0c9c49-c0d9-4b5b-8991-45f1667ef481.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-fd0c9c49-c0d9-4b5b-8991-45f1667ef481.json diff --git a/change/@fluentui-react-fd0c9c49-c0d9-4b5b-8991-45f1667ef481.json b/change/@fluentui-react-fd0c9c49-c0d9-4b5b-8991-45f1667ef481.json new file mode 100644 index 00000000000000..cc1518e48ddae3 --- /dev/null +++ b/change/@fluentui-react-fd0c9c49-c0d9-4b5b-8991-45f1667ef481.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Allowing DatePicker to be focusable within FocusZones by default.", + "packageName": "@fluentui/react", + "email": "humberto_makoto@hotmail.com", + "dependentChangeType": "patch" +} From a9c966a4b3c105d2f3a2cffd1e3f87826fe22e08 Mon Sep 17 00:00:00 2001 From: KHMakoto Date: Thu, 27 Oct 2022 15:36:15 -0700 Subject: [PATCH 3/4] Adding ability to override data-is-focusable. --- packages/react/src/components/DatePicker/DatePicker.base.tsx | 4 +++- .../DatePicker/__snapshots__/DatePicker.test.tsx.snap | 3 +++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/react/src/components/DatePicker/DatePicker.base.tsx b/packages/react/src/components/DatePicker/DatePicker.base.tsx index 8b1d5ef162527d..43ddce85731f11 100644 --- a/packages/react/src/components/DatePicker/DatePicker.base.tsx +++ b/packages/react/src/components/DatePicker/DatePicker.base.tsx @@ -450,11 +450,12 @@ export const DatePickerBase: React.FunctionComponent = React.f textFieldProps && textFieldProps.id && textFieldProps.id !== id ? textFieldProps.id : id + '-label'; const readOnly = !allowTextInput && !disabled; + const dataIsFocusable = (textFieldProps as any)['data-is-focusable'] ?? (props as any)['data-is-focusable'] ?? true; + return (
= React.f tabIndex={tabIndex} readOnly={!allowTextInput} {...textFieldProps} + data-is-focusable={dataIsFocusable} id={textFieldId} className={css(classNames.textField, textFieldProps && textFieldProps.className)} iconProps={{ diff --git a/packages/react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap b/packages/react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap index 03ad49f5bececc..1a641924db7172 100644 --- a/packages/react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap +++ b/packages/react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap @@ -157,6 +157,7 @@ exports[`DatePicker renders DatePicker allowing text input correctly 1`] = ` @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){&::-ms-input-placeholder { color: GrayText; } + data-is-focusable={true} id="DatePicker0-label" onBlur={[Function]} onChange={[Function]} @@ -390,6 +391,7 @@ exports[`DatePicker renders DatePicker with value correctly 1`] = ` overflow: hidden; text-overflow: ellipsis; } + data-is-focusable={true} id="DatePicker0-label" onBlur={[Function]} onChange={[Function]} @@ -622,6 +624,7 @@ exports[`DatePicker renders default DatePicker correctly 1`] = ` overflow: hidden; text-overflow: ellipsis; } + data-is-focusable={true} id="DatePicker0-label" onBlur={[Function]} onChange={[Function]} From d1328f272a05eba3593f7546e9a01f51a05a5ba1 Mon Sep 17 00:00:00 2001 From: KHMakoto Date: Thu, 27 Oct 2022 16:41:06 -0700 Subject: [PATCH 4/4] Fixing ssr-tests issue. --- packages/react/src/components/DatePicker/DatePicker.base.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/DatePicker/DatePicker.base.tsx b/packages/react/src/components/DatePicker/DatePicker.base.tsx index 43ddce85731f11..a7efc9598e60d9 100644 --- a/packages/react/src/components/DatePicker/DatePicker.base.tsx +++ b/packages/react/src/components/DatePicker/DatePicker.base.tsx @@ -450,7 +450,7 @@ export const DatePickerBase: React.FunctionComponent = React.f textFieldProps && textFieldProps.id && textFieldProps.id !== id ? textFieldProps.id : id + '-label'; const readOnly = !allowTextInput && !disabled; - const dataIsFocusable = (textFieldProps as any)['data-is-focusable'] ?? (props as any)['data-is-focusable'] ?? true; + const dataIsFocusable = (textFieldProps as any)?.['data-is-focusable'] ?? (props as any)['data-is-focusable'] ?? true; return (