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?