Disable Scrolling On Numbered TextBoxes

Anvil Q&A
1

What I’m trying to do:
If I have a text box with the type “Number” , small scrolls within the textbox area will increment that number. I’m trying to disable that. This does not happen in the debugger, only the production application.

scroll_issue

What I’ve tried and what’s not working:
Searching the forum, adding a change event.

Clone link:

2

Looks like a y transform in the CSS for input hover/active might be causing that…

1 Like
3

Figured it out for an individual textbox:

        self.text_box_1.add_event_handler('focus', self.disable_scroll)
        self.text_box_1.add_event_handler('lost_focus', self.enable_scroll)

    def disable_scroll(self,*args, **event_args):
        focused_component = event_args['sender']
        if focused_component.type == 'number':
          node = js.get_dom_node(focused_component)
          node.addEventListener('wheel',self._disable_scroll)

    def enable_scroll(self,*args, **event_args):
        print(event_args)
        blurred_component = event_args['sender']
        if blurred_component.type == 'number':
          node = js.get_dom_node(blurred_component)
          node.removeEventListener('wheel', self._disable_scroll)

    def _disable_scroll(self,e):
      e.preventDefault()

I still to need to make it globally effect TextBoxes

4

You could always monkey-patch the TextBox component by deepcopying it, modifying its behavior, then overriding (re setting) the built in TextBox object with the “new” modified one.
Or build a new class using inheritance, etc, etc… but if I’m monkey patching something I’m usually doing something lazy to begin with. :see_no_evil:

It would have to be done before the forms __init__ I would think.

1 Like
5

Yeah… I’m falling to the following function:

def disable_scroll_increment(component):
  
  def _disable_scroll(e):
    e.preventDefault()
    
  def disable_scroll(**event_args):
      focused_component = event_args['sender']
      if focused_component.type == 'number':
        node = js.get_dom_node(focused_component)
        node.addEventListener('wheel',_disable_scroll)

  def enable_scroll(**event_args):
      blurred_component = event_args['sender']
      if blurred_component.type == 'number':
        node = js.get_dom_node(blurred_component)
        node.removeEventListener('wheel', _disable_scroll)

  component.add_event_handler('focus', disable_scroll)
  component.add_event_handler('lost_focus', enable_scroll)

class Form1(Form1Template):

    def __init__(self, **properties):
        self.init_components(**properties)

        # Add event listeners to disable mousewheel on number input fields
        disable_scroll_increment(self.text_box_1)

That I’ll import and apply as needed.

1 Like