MUI TextField type='number'のスクロールイベントを止める

概要

<TextField type='number' />を使っているとスクロールに従って数値が上下します。
このスクロールで勝手に値が増減しても困るので、止める方法を残します。

解決策

スクロールで増減するイベントはフォーカスなので、フォーカスで止めます。

import { BaseSyntheticEvent } from 'react'
import { TextField } from '@mui/material'

<TextField type='number' onFocus={(e: BaseSyntheticEvent) => e.target.blur()} />

blurイベントは、フォーカスが外れる時に起きるイベントで、フォーカス時に生じる
動作をフォーカスが外れた状態にすることで打ち消しています。

詳しくは以下の記事が参考になります。