TextInputs from @sanity/ui with type=time don't work properly in Safari

[jfulse]

Describe the bug

There is a problem when clearing the time input using backspace. In Safari the old value still persists in the DOM, even on refresh, even though it's no longer present in the dataset (I presume it's stored in the revisions somewhere?)

The input works normally in other browsers. I haven't been able to find anything about this so I assume it's a problem with Sanity, could be wrong of course.

To Reproduce

Minimal schema:

// exampleDocumentType.js
import TimeInput from "../inputComponents/TimeInput";

export default {
  name: "exampleDocumentType",
  title: "Example document type",
  type: "document",
  fields: [
    {
      name: "title",
      title: "Title",
      type: "string",
    },
    {
      name: "time",
      title: "Time",
      type: "string",
      inputComponent: TimeInput,
    },
  ],
};

// schema.js
import createSchema from "part:@sanity/base/schema-creator";
import schemaTypes from "all:part:@sanity/base/schema-type";
import exampleDocumentType from "./exampleDocumentType";

export default createSchema({
  name: "default",
  types: schemaTypes.concat([exampleDocumentType]),
});

Minimal input component:

// inputComponents/TimeInput.js
import React, { forwardRef } from "react";
import { TextInput } from "@sanity/ui";
import PatchEvent, { set, unset } from "@sanity/form-builder/PatchEvent";

const TimeInput = (props, forwardedRef) => {
  const handleChange = ({ target }) =>
    props.onChange(PatchEvent.from(set(target.value ?? "")));

  return (
    <TextInput
      type="time"
      value={props.value}
      onChange={handleChange}
      ref={forwardedRef}
      readOnly={props.readOnly}
      onFocus={props.onFocus}
      onBlur={props.onBlur}
    />
  );
};

export default forwardRef(TimeInput);

Expected behavior

The time input should be empty when there is no value

Screenshots

Deleted value on safari:

On Firefox:

Which versions of Sanity are you using?

@sanity/cli 2.19.1 (latest: 2.27.0) @sanity/base 2.27.0 (up to date) @sanity/core 2.27.0 (up to date) @sanity/default-layout 2.27.0 (up to date) @sanity/default-login 2.27.0 (up to date) @sanity/desk-tool 2.27.0 (up to date) @sanity/eslint-config-studio 2.0.0 (up to date) @sanity/vision 2.27.0 (up to date)

What operating system are you using?

macOS Big Sur

Which versions of Node.js / npm are you running?

7.24.2 v16.13.1

[SimeonGriggs]

This appears to be an issue with Safari itself, where an input with type="time" will render 12:30 as placeholder text when the field is empty.

Here's a reproduction in Sanity UI

It could be possible for Sanity UI to overwrite this default.

[danmichaelo]

You’re right, this seems to be a Safari issue at its heart! Yet it’s made worse by the fact that there’s no visual difference between the placeholder value and an actual value with the Sanity UI styling (with no styling, "12:30" is shown in grey, changing to black when you enter a value). Didn’t find much discussion about it, but seems like a fix will have to be rather hacky :disappointed: https://stackoverflow.com/questions/69919586/how-to-remove-the-default-time-1230-pm-in-desktop-safari