fix: error rendering issue in TimePicker component

affects: @medly-components/core
medly · Mar 3, 2024 · 2ca576f · 2ca576f
1 parent 861e4e5
commit 2ca576f
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 5 deletions.
diff --git a/packages/core/src/components/TimePicker/TimePicker.test.tsx b/packages/core/src/components/TimePicker/TimePicker.test.tsx
@@ -56,4 +56,19 @@ describe('TimePicker', () => {
         fireEvent.click(screen.getByLabelText('Time'));
         expect(screen.queryByText('hour-arrow-down')).not.toBeInTheDocument();
     });
+
+    it('should render error message if required', async () => {
+        render(<TimePicker required label="Time" value="" onChange={jest.fn()} />);
+        fireEvent.click(screen.getByLabelText('Time'));
+        fireEvent.click(screen.getByText('Cancel'));
+        expect(await screen.findByText('Constraints not satisfied')).toBeInTheDocument();
+    });
+
+    it('should render error message returned from validator', async () => {
+        const validator = (val: string) => (!val ? 'Please enter time' : '');
+        render(<TimePicker required label="Time" value="" onChange={jest.fn()} validator={validator} />);
+        fireEvent.click(screen.getByLabelText('Time'));
+        fireEvent.click(screen.getByText('Cancel'));
+        expect(await screen.findByText('Please enter time')).toBeInTheDocument();
+    });
 });
diff --git a/packages/core/src/components/TimePicker/TimePickerTextField/TimePickerTextField.tsx b/packages/core/src/components/TimePicker/TimePickerTextField/TimePickerTextField.tsx
@@ -1,7 +1,7 @@
 import { AccessTimeIcon } from '@medly-components/icons';
 import { WithStyle, useCombinedRefs } from '@medly-components/utils';
-import type { FC, FocusEvent } from 'react';
-import { forwardRef, memo, useContext, useEffect, useRef } from 'react';
+import type { ChangeEvent, FC, FocusEvent } from 'react';
+import { forwardRef, memo, useCallback, useContext, useEffect, useRef } from 'react';
 import { PopoverContext } from '../../Popover/Popover.context';
 import TextField from '../../TextField';
 import { TimePickerTextFieldProps } from './types';
@@ -11,16 +11,32 @@ const Component: FC<TimePickerTextFieldProps> = memo(
         const [isDialogOpen] = useContext(PopoverContext);
         const inputRef = useCombinedRefs<HTMLInputElement>(ref, useRef(null));
 
+        const validator = useCallback(
+            (value: string, event: ChangeEvent<HTMLInputElement>) => {
+                if (value === '' && !isDialogOpen) {
+                    const validatorMessage: string = (props.validator && props.validator(value, event)) || '';
+                    const message: string = props.validator ? validatorMessage : (inputRef.current?.validationMessage as string);
+                    return message;
+                }
+                return '';
+            },
+            [props.validator, isDialogOpen]
+        );
+
         const onBlur = (event: FocusEvent<HTMLInputElement>) => {
-            isDialogOpen ? inputRef?.current?.focus() : inputRef?.current?.blur();
-            props?.onBlur?.(event);
+            if (isDialogOpen) {
+                inputRef?.current?.focus();
+            } else {
+                inputRef?.current?.blur();
+                props?.onBlur?.(event);
+            }
         };
 
         useEffect(() => {
             !isDialogOpen && inputRef?.current?.blur();
         }, [isDialogOpen]);
 
-        return <TextField fullWidth type="time" suffix={AccessTimeIcon} ref={inputRef} {...{ ...props, onBlur }} />;
+        return <TextField fullWidth type="time" suffix={AccessTimeIcon} ref={inputRef} {...{ ...props, onBlur, validator }} />;
     })
 );
 Component.displayName = 'TimePickerTextField';