autoNumeric icon indicating copy to clipboard operation
autoNumeric copied to clipboard

Rewrite the input event process chain from scratch

Open AlexandreBonneau opened this issue 7 years ago • 0 comments

The problem

Handling user events is one of the core feature of autoNumeric.

Throughout the years, more and more features have been added to autoNumeric, greatly complexifying the way we manage them. And more recently, the keypress event has been deprecated, or is just not used anymore (ie. under Android).

This makes the code that handle the user input events way too complex for its own sake. It makes it difficult to grasp, even when you already know the code, prevent user contributions or does not allow us to easily (and quickly) add new features.

This is partly due to the fact it branches quite a lot, and uses functions that do multiple things at once, while using 'global variables', making it hard to follow what's really going on.

The good news is that we can fix that! :)

The current state

Right now, we have 3 main functions, and I list below which function each one of them call on each keystroke (Note: I'll just list one depth of function calls) : in parenthesis, the number of line of the function

  • onKeydown (46)
    • _updateAutoNumericHolderEventKeycode (4)
    • _updateAutoNumericHolderProperties (6)
    • _skipAlways (106)
    • _processCharacterDeletion (30)
    • _formatValue (130)
    • triggerEvent (11)
    • preventDefault
  • onKeypress (50)
    • _updateAutoNumericHolderProperties (6)
    • _skipAlways (106)
    • _processCharacterInsertion (100)
    • _formatValue (130)
    • preventDefault
    • getElementSelection (17)
    • setElementSelection (17)
    • triggerEvent (11)
  • onKeyup (39)
    • _updateAutoNumericHolderProperties (6)
    • _skipAlways (106)
    • setElementSelection (17)
    • saveValueToPersistentStorage (35)
    • _formatValue (130)
    • triggerEvent (11)

How events are sent in a 'normal' input

By default a 'normal' input output those events in the right order when inputting a character key (ie. 'a') :

  • keydown
  • keypress
  • input
  • keyup

...when inputting a modifier key (ie. 'ctrl') :

  • keydown
  • keyup

If 'delete' or 'backspace' is entered, the following events are sent :

  • keydown
  • input
  • keyup

If 'enter' is entered and the value has not changed, the following events are sent :

  • keydown
  • keypress
  • keyup

If 'enter' is entered and the value has been changed, the following events are sent :

  • keydown
  • keypress
  • change
  • keyup

When a paste is done, the following events are sent :

  • input (if paste is done with the mouse) or
  • keydown (if paste is done with ctrl+v)
  • keydown
  • input
  • keyup
  • keyup

The futur

I think we should first need to :

  1. Map precisely which functions gets called when and why, then from there
  2. Get back to the drawing board and rewrite those functions (and functions that gets called by those) in a way that we : 2.1. do not repeat ourselves, and 2.2. keep the code easy to read and understand.

This is obviously a huge work since it touch the core of autoNumeric, so buckle up!

AlexandreBonneau avatar Jan 23 '17 08:01 AlexandreBonneau