feat(number input): added a prop to disable the wheel functionality

[mgueyraud]

Closes #11982

Added a prop to disable the wheel functionality that inputs with type number have.

Changelog

New

• Added a disableWheel prop in the component

[github-actions]

DCO Assistant Lite bot All contributors have signed the DCO.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	fb7b93b
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/635ae280b5e5c6000acdd34e
😎 Deploy Preview	https://deploy-preview-12358--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for carbon-components-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	fb7b93b
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/635ae280d0f89600086e59e1
😎 Deploy Preview	https://deploy-preview-12358--carbon-components-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[mgueyraud]

I have read the DCO document and I hereby sign the DCO.

[sstrubberg]

@mgueyraud Looks like one of the tests is failing. From the root of the carbon folder in your dev environment, run yarn test packages/react/__tests__/PublicAPI-test.js -u. That should take care of it.

[mgueyraud]

Hey @sstrubberg, thank you very much!. I already did the commit, hope it works.

[tay1orjones]

Thanks for putting this together! Based on the original issue, this is a bit off mark from what was discussed.

• The wheel event should only be disabled when the input has focus.
• The input should not be blurred.
• The onWheel event can not be used due to limitations with React described in the original issue.

On focus of the input, a manual event handler needs to be applied to the input element that calls evt.preventDefault(); when fired. This manual handler should be removed on blur of the input.

[mgueyraud]

Hey @tay1orjones , changed the approach as you said, let me know if it's good.

[sstrubberg]

Ok, now I think you need to run yarn format or yarn format:diff to fix the next error :)

[mgueyraud]

Hey @sstrubberg , I did as you said but it seems it's not something from formatting, if you check the action it looks like it didn't install the dependencies correctly.

[tw15egan]

@mgueyraud, have you pulled the latest changes from main and run yarn? May need to run yarn build afterward, there have been a few PRs merged this afternoon. Afterward, you can run yarn test -u if any snapshots still need updating.

[mgueyraud]

@tw15egan , did the merge and added me as a contributor also.

[tay1orjones]

Looks good! Wheel events do not change the value of the input when the input is focused and the pointer is hovered over the current value. There is no change when the input is not focused.

wheel.event.properly.disabled.mov

Thanks so much for the contribution! 🎉

It would be nice if there was a test to cover this functionality, but it's not totally necessary here for this contribution. We'd probably have to use fireEvent() instead of something from user-event. user-event doesn't support wheel/scroll events.

[tw15egan]

LGTM, thanks for contributing! 🎉 ✅ 👍🏻

[kodiakhq]

This PR currently has a merge conflict. Please resolve this and then re-add the status: ready to merge 🎉 label.

[tw15egan]

@mgueyraud Looks like there are some merge conflicts, once these are fixed we're good to go 👍🏻

[mgueyraud]

Hey @tw15egan , did the merge and resolved the conflicts!

[carbon-bot]

Hey there! v11.16.0 was just released that references this issue/PR.