Typing and erasing in loop is not clean, in loop, typing text goes heywire

[sadafk831]

ISSUE

I have a 9 rows to print, and that animation should work in loop, the first time iteration works as expected, but the 2nd and all after that, the erase leaves the first letter in the span for each line, like here in the image.

Debug Report

The error is in the typing.js at line 166, in while loop. you set the cursor.charPos back to 0 or -1, but never set the cursor.numToErase to reset value.

cursor.charPos = text[cursor.lineNum].length ? text[cursor.lineNum].length - 1 : 0;

So this mess up the calculation value for counting the backspace erase count. The following shows the error present in the code, after completing the line, an going in loop instead of setting back to the 0 numToErase gets set to the count of the line to erase next.

{lineNum: 1, charPos: -1, numToErase: 10, preEraseLineNum: 1, delay: 0, …}
{lineNum: 0, charPos: 9, numToErase: 9, preEraseLineNum: 1, delay: 0, …}

where it should have been

{lineNum: 1, charPos: -1, numToErase: 0, preEraseLineNum: 1, delay: 0, …}
{lineNum: 0, charPos: 9, numToErase: 10, preEraseLineNum: 1, delay: 0, …}

Solution

1. LlBRARY FIX Add following line bellow the line 166

    cursor.charPos = text[cursor.lineNum].length ? text[cursor.lineNum].length - 1 : 0;
    cursor.numToErase = text[cursor.lineNum].length ? text[cursor.lineNum].length : 0;

2. IMPLEMENTATION FIX Adding +1 to the actual count of the text does temporary fix the bug

    <Typing.Backspace count={typingText.length + 1} />