初めに

webアプリをReactで作成していまして、input type ="date"を使用して日付の値を取得していたのですが、PCだと削除ボタンが機能し、iosだと機能しないという現象がおこりました。
解決するのに時間がかかりましたので忘記録です。

解決したコード

app.jsx


import React,{useState} from 'react';

export default function App(props) {
  // 日付の値を格納する 
  const [inputDate, setInputDate] = useState({ date: "" });

  // 日付の値を取得する処理
  const handleOnChange = (e)=>{
    const target = e.target;
    const { name } = target;
    const { value } = target;
    //日付のセット
    setInputDate({
      ...inputDate,
      [name]: value,
    });
    
    // ios時に削除を押下された時に機能させる処理 
    // 機能するにはsetTimeoutが必要で、少しの遅延が必要です
    setTimeout(()=>{
      target.defaultValue = "";
    }, 100);
  }
  
  return (
     <div>
        <input 
          type="date" 
          name="date"
          value={inputDate.date} 
          onChange={handleOnChange}
          />
      </div>
  );
}

上記のコードで削除機能は動きます。大事な部分はonChangeイベント処理のsetTimeoutを使用しているところです。

まとめ

実際にconsole.logで確認してないのではっきりとわかりませんが、iosで削除機能が機能しない理由はvalueを書き換える処理の時にdefaultValueも書き換えられたのではないかと思います。(defaultValueのがvalueよりも優先して見られる。)
またvalueと書き換えタイミングが一緒なので、遅延で削除処理をいれないと機能しないのかもしれませんね。
ただ、解決して何よりです！

参考:iOSの日付入力のクリアボタンが正しいイベント値を返さない