Dependent Dropdown Up & Down Arrow Keyboard Keys Issue

I experienced no issues if (Category) dropdown options are selected by Mouse Cursor, (Program) Dependent DropDown will show the correspoding options.

However, when using Up & Down Keyboard Arrow Keys instead of Mouse Cursor to switch between options of (Category), (Program) Dependent DropDown will show wrong options.

The community support is requested to provide a solution so that when using Up & Down Keyboard Arrow Keys in (Category), (Progrem) Dependent DropDown will show the correct correspoding options.

---------------

Below are the format & keystroke of (Category),

In case if you ask why I have so many spaces,

I used them to align DropDown list at the center.

---------------

Custom Format Script

this.getField("Category").setItems(["                      - Select -\t\t"+count,"\t    Compliance\t\t"+count, "\t   Performance\t\t"+count, "\t     HR Focus\t\t"+count, "\t       Culture\t\t"+count]);

Custom Keystroke Script

var f= this.getField("Program");

switch(event.value){

case "\t    Compliance\t\t":

f.setItems(["   - Select Compliance Program - ","\t       TPRM", "              T&I Enhancement", "\t  GI 1000.500", "                       EMMS","            PMO System Quality", "       Master Service Agreement"]);

break;

case "\t   Performance\t\t":

f.setItems(["  - Select Performance Program - ","               Performance KPIs"]);

break;

case "\t     HR Focus\t\t":

f.setItems(["     - Select HR Focus Program - ","               HR Focus Tasks"]);

break;

case "\t       Culture\t\t":

f.setItems(["       - Select Culture Program - ","                  Culture Tasks"]);

break;

case "                      - Select -\t\t":

f.clearItems();}

---------------

Moath F. Alharbi

Maintenance Engineer

Saudi Aramco