[React]<input type='number'>のスクロールイベントを削除

<input type='number' />ではデフォルトの挙動ではスクロールしても何も起こらないと思いますが、スクロールに従って数値が上下するという現象に出会いました。
勝手に数値が変動するとUX的にまずい気がするのでそれを止める方法を残しときます。

結論

focusを外しましょう。

<input type='number' onWheel={(e) => e.target.blur()} />

これは無理

<input type='number' onWheel={(e) => e.preventDefault()} />

preventDefaultでもいけそうですがエラーになります。
スクロールをはじめとするpassiveイベントはjsの完了を待っていてはUXが悪くなるのでユーザーの入力に対して制御できないみたいですね。

Unable to preventDefault inside passive event listener invocation.

おまけ

フォームの右に出る⇅消す方法

global.css

input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type='number'] {
  -moz-appearance: textfield;
}