Прокрутка на входе type = "number" для изменения его значения: Как остановить прокрутку родительского элемента

Question

У меня есть форма внутри overflow: auto контейнера с фиксированными размерами. Когда форма больше контейнера, контейнер получает полосы прокрутки. Все хорошо. Теперь один из входов внутри формы имеет type="number". Это удобно, потому что браузер предоставляет возможность изменять его значение с помощью колесика мыши. Круто.

Теперь проблема:

Как я могу предотвратить прокрутку контейнера, когда я изменяю значение этих входов с помощью колесика мыши?

Может показаться, что распространенная проблема, но я не нахожу никакого чистого решения там. Обратите внимание , что я не хочу отключать прокрутку или исчезать полосы прокрутки, я просто хочу остановить распространение события wheel в родительский контейнер, когда он захвачен в указанном типе ввода c, если это имеет смысл или возможно.

Я использую React с синтаксисом JSX и компонентами Material-UI.

Добавление onWheel={e => e.stopPropagation()} на входе или попытка перехватить событие onWheel в контейнере не работал (я получаю Unable to preventDefault inside passive event listener due to target being treated as passive ошибка).

иллюстрация проблемы

Answer 1

Наконец, добавление этого в прокручиваемый контейнер сработало для меня. Я не знаю, почему это работает, функция обработчика пуста. Если бы кто-то мог пролить свет на это, было бы здорово.

const Container = props => {
  const reference = React.createRef();
  const wheelHandler = () => {}; // Empty handler???

  useEffect(() => {
    const reff = reference.current;
    reff.addEventListener('wheel', wheelHandler);
    return () => reff.removeEventListener('wheel', wheelHandler);
  }, [reference])

  return <Box ref={reference} className={classes.content} {...props} />
}