fix(time-input): pass onChange as-is (#2164)

commercetools · Apr 5, 2022 · 229af6e · 229af6e · vercel · Apr 5, 2022
1 parent 16cf82b
commit 229af6e
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 58 deletions.
diff --git a/.changeset/warm-rocks-add.md b/.changeset/warm-rocks-add.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/time-input': patch
+---
+
+Fix handling of change events.
diff --git a/packages/components/inputs/time-input/src/time-input.spec.js b/packages/components/inputs/time-input/src/time-input.spec.js
@@ -20,6 +20,7 @@ const TestComponent = (props) => {
         {...props}
         value={time}
         onChange={(event) => setTime(event.target.value)}
+        onBlur={(event) => setTime(event.target.value)}
       />
       <div>{time ? `Time: ${time}` : 'No time'}</div>
     </div>
@@ -108,7 +109,7 @@ describe('TimeInput', () => {
     const event = { target: { value: '9' } };
     fireEvent.change(screen.getByLabelText('Input'), event);
 
-    await screen.findByText('Time: 9:00 AM');
+    await screen.findByText('Time: 9');
   });
 
   it('should call onChange when clearing the value', async () => {
@@ -131,55 +132,38 @@ describe('TimeInput', () => {
     expect(container.querySelector('input')).toHaveFocus();
   });
 
-  it('should call onBlur when input loses focus', () => {
-    const { container } = render(<TimeInput {...baseProps} />);
-    container.querySelector('input').focus();
-    expect(container.querySelector('input')).toHaveFocus();
-    container.querySelector('input').blur();
-    expect(container.querySelector('input')).not.toHaveFocus();
-  });
+  it('should call onBlur when input loses focus and format the time (english format)', async () => {
+    render(<TestComponent {...baseProps} />, { locale: 'en' });
 
-  it('should format the value when input is blurred on english locale', () => {
-    const onBlur = jest.fn();
-    const { container } = render(
-      <TimeInput {...baseProps} onBlur={onBlur} value="2:3 AM" />
-    );
+    await screen.findByText('No time');
 
-    container.querySelector('input').focus();
-    expect(container.querySelector('input')).toHaveFocus();
-    container.querySelector('input').blur();
-    expect(container.querySelector('input')).not.toHaveFocus();
-    expect(onBlur).toHaveBeenCalledWith(
-      expect.objectContaining({
-        target: expect.objectContaining({
-          id: 'some-id',
-          name: 'some-name',
-          value: '2:03 AM', // english format
-        }),
-      })
-    );
+    const event = { target: { value: '9' } };
+    fireEvent.change(screen.getByLabelText('Input'), event);
+
+    await screen.findByText('Time: 9');
+
+    fireEvent.blur(screen.getByLabelText('Input'));
+
+    await screen.findByText('Time: 9:00 AM'); // english format
+
+    expect(screen.queryByLabelText('Input')).not.toHaveFocus();
   });
 
-  it('should format the value when input is blurred on german locale', () => {
-    const onBlur = jest.fn();
-    const { container } = render(
-      <TimeInput {...baseProps} onBlur={onBlur} value="12:3" />,
-      { locale: 'de' }
-    );
+  it('should call onBlur when input loses focus and format the time (german format)', async () => {
+    render(<TestComponent {...baseProps} />, { locale: 'de' });
 
-    container.querySelector('input').focus();
-    expect(container.querySelector('input')).toHaveFocus();
-    container.querySelector('input').blur();
-    expect(container.querySelector('input')).not.toHaveFocus();
-    expect(onBlur).toHaveBeenCalledWith(
-      expect.objectContaining({
-        target: expect.objectContaining({
-          id: 'some-id',
-          name: 'some-name',
-          value: '12:03', // german format
-        }),
-      })
-    );
+    await screen.findByText('No time');
+
+    const event = { target: { value: '12:3' } };
+    fireEvent.change(screen.getByLabelText('Input'), event);
+
+    await screen.findByText('Time: 12:3');
+
+    fireEvent.blur(screen.getByLabelText('Input'));
+
+    await screen.findByText('Time: 12:03'); // english format
+
+    expect(screen.queryByLabelText('Input')).not.toHaveFocus();
   });
 
   it('should have focus automatically when isAutofocussed is passed', () => {

diff --git a/packages/components/inputs/time-input/src/time-input.tsx b/packages/components/inputs/time-input/src/time-input.tsx
@@ -151,18 +151,7 @@ const TimeInput = (props: TTimeInputProps) => {
     );
   }
 
-  const { onBlur, onChange } = props;
-
-  const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
-    (event) => {
-      const rawValue = event.target.value;
-      const formattedValue = TimeInput.toLocaleTime(rawValue, intl.locale);
-      event.target.value = formattedValue;
-      onChange?.(event);
-    },
-    [intl.locale, onChange]
-  );
-
+  const { onBlur } = props;
   const handleBlur = useCallback<FocusEventHandler<HTMLInputElement>>(
     (event) => {
       const rawValue = event.target.value;
@@ -196,7 +185,7 @@ const TimeInput = (props: TTimeInputProps) => {
         name={props.name}
         autoComplete={props.autoComplete}
         value={props.value}
-        onChange={handleChange}
+        onChange={props.onChange}
         onBlur={handleBlur}
         onFocus={props.onFocus}
         isAutofocussed={props.isAutofocussed}