fix: time editor erases value as you type (supabase#43348)

## Problem

When using chrome, it's impossible to enter a time value

## Solution

Avoid controlling the input value and only bubble up the change when the
value is a valid time or is empty

## How to test

- Create a table with a `time` column
- Add a new row and start entering a value using the keyboard

Author: djhi

apps/studio/components/grid/components/editor/TimeEditor.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react'
-import type { RenderEditCellProps } from 'react-data-grid'
 import dayjs from 'dayjs'
 import customParseFormat from 'dayjs/plugin/customParseFormat'
+import * as React from 'react'
+import type { RenderEditCellProps } from 'react-data-grid'
 
 dayjs.extend(customParseFormat)
 
@@ -29,23 +29,26 @@ function BaseEditor<TRow, TSummaryRow = unknown>({
   onClose,
 }: TimeEditorProps<TRow, TSummaryRow>) {
   const value = row[column.key as keyof TRow] as unknown as string
-  const timeValue = value ? dayjs(value, format).format(INPUT_TIME_FORMAT) : value
 
   function onChange(event: React.ChangeEvent<HTMLInputElement>) {
     const _value = event.target.value
+
     if (_value == '') {
       onRowChange({ ...row, [column.key]: null })
     } else {
-      const _timeValue = dayjs(_value, INPUT_TIME_FORMAT).format(format)
-      onRowChange({ ...row, [column.key]: _timeValue })
+      const dayJsValue = dayjs(_value, format)
+      if (dayJsValue.isValid()) {
+        const _timeValue = dayJsValue.format(format)
+        onRowChange({ ...row, [column.key]: _timeValue })
+      }
     }
   }
 
   return (
     <input
       className="sb-grid-time-editor"
       ref={autoFocusAndSelect}
-      value={timeValue ?? ''}
+      defaultValue={value ?? ''}
       onChange={onChange}
       onBlur={() => onClose(true)}
       type="time"