Disable scroll wheel increment and decrement on numeric entry field component

Ignition
1

When the mouse is over the component and it is focused the scroll wheel changes the value. Does anybody know a way to disable this feature?
scroll

2

I've been down this road many times and found that the only way to accomplish this was by adding JavaScript :confused:

If you add a domId to your component and then add a markdown component and add:

<img style='display:none' src='/favicon.ico' onload="
        const numberInputs = document.querySelectorAll('#your_domId');
        numberInputs.forEach(function(input) {
            input.addEventListener('wheel', function(event) {
                event.preventDefault();
            });
        });
">

to the source it should work!

3 Likes
3

Glad this could be solved. A couple of follow up questions:

-I'm not clear on how to add a markdown component. Is this a matter of adding a "source" property to props like so:

image
image420×831 46.1 KB

-Does the domId have the # symbol before it or in this case would the domId be NumericEntry.

Thanks

4

You can find the Markdown component under the "Display" section of the Perspective Components panel in the designer:
image
The Markdown component has a source property by default and that is where you put the javascript code that @jbexten posted above:
image

Lastly, The domId that you put on the numeric entry component goes in the Meta properties and it should not have a #:
image

2 Likes