iOS Toolbar on TextField doesn't hide smoothly when calling blur

Question

I have a TextField set to display a number keypad. By default, this doesn't seem to come with a way for the user to indicate he's finished entering data and then hide it so I added a KeyboardToolbar in the XML which has a DONE button.

When I click the textfield, the number keypad displays the toolbar with the DONE button. When I click "Done", the keypad starts to scroll off the window, but the toolbar doesn't move. When the keypad is fully out of the view, the toolbar then jumps to the bottom of the window and then scrolls off the page too. This causes a noticeable flash for the user.

Any idea how to stop this flash effect from happening? I tried setting opacity 0 on the toolbar when clicked but it doesn't have any effect.

(Expected result is that the toolbar scrolls down with the keypad)

Here's a slowed down GIF to illustrate:

XML:

<TextField id="txt_contactNumber" class="txt_inputshort">
          <KeyboardToolbar>
                <Toolbar id="numberToolbar" bottom="0">
                    <Items>
                        <Button id="flexSpace" systemButton="Ti.UI.iPhone.SystemButton.FLEXIBLE_SPACE" />
                        <Button id="cancelContact" systemButton="Ti.UI.iPhone.SystemButton.DONE" />
                    </Items>
                </Toolbar>
            </KeyboardToolbar>
        </TextField>

JS:

$.cancelContact.addEventListener('click', function(){
    $.txt_contactNumber.blur();
});

TSS:

"#txt_contactNumber": {
    keyboardType: Ti.UI.KEYBOARD_NUMBER_PAD,
}