Next problem shortcut misbehaving and crashing
The grade view can crash in very specific conditions. To replicate:
- Navigate to any problem other than the first
- Select the first problem using the dropdown
- Stop focusing the dropdown
- Use the keyboard shortcut to go to the next problem, it will crash.
Also, the next problem shortcut breaks in the following case:
- Select any problem using the dropdown
- Stop focusing the dropdown
- Use the next problem shortcut, nothing will happen
- Only after using the previous problem shortcut the next problem shortcut will work again.
The reason for this odd behaviour: Javascript! Apparently, when using the dropdown, the current pIndex
gets set to a string with the index, so for example "0"
, "1"
, etc. When we use the previous/next problem shortcut, we subtract/add 1
to this index. Here comes the fun:
"0" + 1 -> "01"
"1" + 1 -> "11"
"2" + 1 -> "21"
...
"0" - 1 -> -1
"1" - 1 -> 0
"2" - 1 -> 1
Next, we check if this new index is within the bounds of the available problems. The index "01"
will be within bounds, but obviously, when we try to access the problem with index "01"
, there is no such problem and React will crash. The index "11"
will (usually) not be within bounds, and nothing will happen. The previous problem shortcut sets the index to an integer again, and everything will continue to work normally.