Reactのinput type=number内でスクロールすると値が変わる

あるWebサービスを使用した際、input内でスクロールすると入力した値が変更されるという現象に遭遇したので、原因を調べてみました。

現象内容

とあるサービスで数値を入力後、マウスホイールでスクロールしようとした際に入力値が変更される現象に遭遇しました。
具体的な内容としては、入力フィールドを選択して数値を入力後、フォーカスがそのinputにある状態でその要素上でマウスホイールでスクロールを行うと、入力した数値が増減してしまうという状態です。

デベロッパーツールで確認したところ、input type=numberで実装されていたので、type=numberにそういった機能があるのかと思ったのですが、試した範囲ではそういった機能はなさそうでした。

<input type="number" name="number" id="number">

通常のinput type=numberのデモページ

色々調べてみたところ、Reactでinput type=numberを使用した際にその挙動になるようでした。

<>
  <input type="number" name="number" id="number" />
</>

Reactでのinput type=numberのデモページ

対応方法としては、ホイールしたタイミングで一時的にフォーカスを外すことで、値が変更されるのを回避できそうでした。

<input type="number" name="number" id="number"
  onWheel = {(e) => {
    let targetInput =  e.currentTarget;
    targetInput.blur();
    setTimeout(() => {
      targetInput.focus();
    }, 0);
  }}
/>

対応後のデモページ