From 8a9ed7b1ec8dc3d6e3c52d40572178806db77a4f Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Tue, 14 Mar 2023 10:56:40 -0700 Subject: [PATCH 1/2] fixing space issue and delete issue --- .../DatePicker/renderDatePicker.tsx | 7 +- .../components/DatePicker/useDatePicker.tsx | 84 ++++--------------- 2 files changed, 22 insertions(+), 69 deletions(-) diff --git a/packages/react-components/react-datepicker-compat/src/components/DatePicker/renderDatePicker.tsx b/packages/react-components/react-datepicker-compat/src/components/DatePicker/renderDatePicker.tsx index d69fe87e6e256a..6fb4c6bb409eac 100644 --- a/packages/react-components/react-datepicker-compat/src/components/DatePicker/renderDatePicker.tsx +++ b/packages/react-components/react-datepicker-compat/src/components/DatePicker/renderDatePicker.tsx @@ -17,8 +17,11 @@ export const renderDatePicker_unstable = (state: DatePickerState) => { {popoverTriggerChildProps => { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const rootProps: any = { root: popoverTriggerChildProps }; + // onKeyDown is not needed as DatePicker handles closing the popover with ESC internally. onKeyDown also + // causes issues when typing in the input, not letting the user type SPACE and bugs with BACKSPACE. + const { onKeyDown, ...inputTriggerProps } = popoverTriggerChildProps; + const rootProps = { root: { ...inputTriggerProps } }; + return ( diff --git a/packages/react-components/react-datepicker-compat/src/components/DatePicker/useDatePicker.tsx b/packages/react-components/react-datepicker-compat/src/components/DatePicker/useDatePicker.tsx index a0a7303dbad077..1cf0a30e6926d7 100644 --- a/packages/react-components/react-datepicker-compat/src/components/DatePicker/useDatePicker.tsx +++ b/packages/react-components/react-datepicker-compat/src/components/DatePicker/useDatePicker.tsx @@ -52,7 +52,6 @@ function useCalendarVisibility({ allowTextInput, onAfterMenuDismiss }: DatePicke isMounted.current = true; }, // Should only run on allowTextInput or isCalendarShown change - // eslint-disable-next-line react-hooks/exhaustive-deps [allowTextInput, isCalendarShown], ); @@ -229,7 +228,7 @@ export const useDatePicker_unstable = (props: DatePickerProps, ref: React.Ref { + const onInputFocus = React.useCallback((): void => { if (disableAutoFocus) { return; } @@ -335,24 +334,11 @@ export const useDatePicker_unstable = (props: DatePickerProps, ref: React.Ref { - // let shouldFocus = true; - // // If the user has specified that the callout shouldn't use initial focus, then respect - // // that and don't attempt to set focus. That will default to true within the callout - // // so we need to check if it's undefined here. - // if (props.calloutProps && props.calloutProps.setInitialFocus !== undefined) { - // shouldFocus = props.calloutProps.setInitialFocus; - // } - // if (calendar.current && shouldFocus) { - // calendar.current.focus(); - // } - // }, [props.calloutProps]); - - const onTextFieldBlur = React.useCallback((): void => { + const onInputBlur = React.useCallback((): void => { validateTextInput(); }, [validateTextInput]); - const onTextFieldChanged = React.useCallback( + const onInputChange = React.useCallback( (ev: React.FormEvent, data: InputOnChangeData): void => { const { value: newValue } = data; @@ -361,15 +347,13 @@ export const useDatePicker_unstable = (props: DatePickerProps, ref: React.Ref): void => { switch (ev.key) { case Enter: @@ -411,7 +395,7 @@ export const useDatePicker_unstable = (props: DatePickerProps, ref: React.Ref { + const onInputClick = React.useCallback((): void => { // default openOnClick to !props.disableAutoFocus for legacy support of disableAutoFocus behavior const openOnClick = props.openOnClick || !props.disableAutoFocus; if (openOnClick && !isCalendarShown && !props.disabled) { @@ -440,42 +424,7 @@ export const useDatePicker_unstable = (props: DatePickerProps, ref: React.Ref JSX.Element | null, - // ) => JSX.Element | null, - // ) => { - // return ( - // <> - // {inputProps?.description ? defaultRender?.(inputProps) : null} - //
- // {statusMessage} - //
- // - // ); - // }; - - // const renderReadOnlyInput: ITextFieldProps['onRenderInput'] = inputProps => { - // const divProps = getNativeProps(inputProps!, divProperties); - - // // Talkback on Android treats readonly inputs as disabled, so swipe gestures to open the Calendar - // // don't register. Workaround is rendering a div with role="combobox" (passed in via TextField props). - // return ( - //
- // {formattedDate || ( - // // Putting the placeholder in a separate span fixes specificity issues for the text color - // {placeholder} - // )} - //
- // ); - // }; - - // const nativeProps = getNativeProps>(props, divProperties, ['value']); - // // const iconProps = textFieldProps && textFieldProps.iconProps; - const textFieldId = - textFieldProps && textFieldProps.id && textFieldProps.id !== id ? textFieldProps.id : id + '-label'; + const inputId = inputProps && inputProps.id && inputProps.id !== id ? inputProps.id : id + '-label'; const inputAppearance: InputProps['appearance'] = underlined ? 'underline' @@ -507,15 +456,22 @@ export const useDatePicker_unstable = (props: DatePickerProps, ref: React.Ref} />, disabled, - id: textFieldId, + id: inputId, placeholder, readOnly: !allowTextInput, required: isRequired, role: 'combobox', tabIndex, - ...textFieldProps, + ...inputProps, }, }); + inputShorthand.onBlur = onInputBlur; + inputShorthand.onClick = onInputClick; + inputShorthand.onFocus = onInputFocus; + inputShorthand.onKeyDown = onInputKeyDown; + inputShorthand.onChange = mergeCallbacks(onInputChange, props.input?.onChange); + // This is the problem.... + inputShorthand.value = formattedDate; const inputFieldShorthand = resolveShorthand(props.inputField, { defaultProps: { @@ -526,12 +482,6 @@ export const useDatePicker_unstable = (props: DatePickerProps, ref: React.Ref Date: Tue, 14 Mar 2023 11:10:16 -0700 Subject: [PATCH 2/2] removing comment and adding back ignore comment --- .../src/components/DatePicker/useDatePicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-datepicker-compat/src/components/DatePicker/useDatePicker.tsx b/packages/react-components/react-datepicker-compat/src/components/DatePicker/useDatePicker.tsx index 1cf0a30e6926d7..fb8b1b2c52f76a 100644 --- a/packages/react-components/react-datepicker-compat/src/components/DatePicker/useDatePicker.tsx +++ b/packages/react-components/react-datepicker-compat/src/components/DatePicker/useDatePicker.tsx @@ -52,6 +52,7 @@ function useCalendarVisibility({ allowTextInput, onAfterMenuDismiss }: DatePicke isMounted.current = true; }, // Should only run on allowTextInput or isCalendarShown change + // eslint-disable-next-line react-hooks/exhaustive-deps [allowTextInput, isCalendarShown], ); @@ -470,7 +471,6 @@ export const useDatePicker_unstable = (props: DatePickerProps, ref: React.Ref