Can't submit date input form created with vuejs in safari

Question

I really like Vuejs and use it at work.

I encountered a puzzling event the other day.

Please let me know if you know anything about this.

The code in question is as follows

<script setup lang="ts">
import { ref } from 'vue'

const createdAt = ref('')

const submit = () => {
  console.log('submit')
}

const clear = () => {
  createdAt.value = ''
}
</script>

<template>
  <form @submit.prevent="submit">
    <label for="createdAt">CreatedAt</label>
    <input id="createdAt" type="date" v-model="createdAt" />
    <button type="button" @click="clear">Clear</button>
    <button>Save</button>
  </form>
</template>

Then do the following

1. Select a date from the date entry form
2. Click Clear button to empty the date value
3. Click the Save button to send the value
4. At this time, chrome succeeds, but in safari, the click on the save button does not respond

enter image description here

I hope that the save button will respond in safari as it does in chrome, and that the date can be submitted.

I am using safari version 17.2.1.

I checked the ValidityState value and it looks fine

I wrote the same code in React and it works fine

import { FormEvent, useState } from 'react'

function App() {
  const [createdAt, setCreatedAt] = useState('')
  const submit = (e: FormEvent) => {
    e.preventDefault()
    console.log('submit')
  }
  const clear = () => {
    setCreatedAt('')
  }

  return (
    <>
      <h1>Vite + React</h1>
      <form onSubmit={(e) => submit(e)}>
        <label htmlFor="createdAt">CreatedAt</label>
        <input
          id="createdAt"
          type="date"
          value={createdAt}
          // onInput={() => setCreatedAt('2025-01-22')}
          onChange={(e) => setCreatedAt(e.target.value)}
        />
        <button type="button" onClick={clear}>
          clear
        </button>
        <button>save</button>
      </form>
    </>
  )
}

export default App

Thanks for reading this question.

I hope you get an answer.

Answer 1

According to my tests, Safari doesn’t allow to submit the form when the date field value is not valid. The problem is that setting the value manually to an empty string does not (always) reset its state for some reasons and prevents the submission.

Playground

It looks like a browser bug to me. The only workarounds I was able to find are:

1. Adding novalidate to the form element to disable browser validation altogether
2. Using a <button type="reset"> to clear the form using the native way (remove the custom logic if you do that), but that will impact all fields within this form, not just the date.