form render issue - hide/show control

[hemendpatel]

I'm using Form control and hide a control base on condition. It is working if I use tab to navigate or move focus between child control on a page but it redraw if I'm using down or up arrow for navigation. does any body use form control to handle visibility?

Controller : export class LoginController { view: LoginView

constructor() {
    Screen.terminal.windowTitle("Login");
    this.onChange = this.onChange.bind(this);

    this.view = new LoginView();

    this.view.form.labeledInputs.find((x: { key: string; }) => x.key === 'UserName').on('key', this.onChange);
    Screen.document.giveFocusTo(this.view.form);
}

onChange(value: any, match: any, data: any) {
    this.view.form.labeledInputs.find((x: { key: string; }) => x.key === 'bdate').hide()
}

};

View: import Screen from '../screen' const tkit = require("terminal-kit"); import { BaseView } from '../shared/base.view'; export class LoginView { form: any constructor() { this.form = new tkit.Form({ parent: Screen.document.elements.core, x: 1, y: 1, width: 40,
inputs: [ { key: 'UserName', label: 'Login: ', content: '', validator: { type: 'string' }, maxLength: 20, }, { key: 'Password', echoChar: '*', label: 'Password: ', validator: { type: 'number' }, disabled: true } , { key: 'bdate', label: 'Birth Date: ', content: '', validator: { type: 'string' }, maxLength: 20, } ], buttons: [ { content: '', value: 'ok' }, { content: '', value: 'cancel' } ] });

    this.form.selectInputKeyBindings = {
        LEFT: 'previous',
        RIGHT: 'next',
        UP: 'previous',
        DOWN: 'next'
    };

}

};

Step to reproduce :

step 1:

Step 2: Press enter. It will hide Birth date input control

Step 3: press tab It will work without any issue

Issue Step 4: instead of using tab, use down or up arrow.

it will display again.

anybody use form control in your application and noticed such issue?