fix(item bank): adds logic to set tab index on item entry table

src/Assets/Styles/item-bank.less

@@ -73,6 +73,7 @@
   border-width: 1px;
   border-radius: @spacing-item;
   table-layout: fixed;
+  width: 40px;
 }
 
 .current-items-table {
@@ -185,9 +186,10 @@
 }
 
 .submit-button {
-  margin-left: 60px;
+  width: 80px;
 }
 
 .clear-button {
   float: right;
+  width: 80px;
 }

src/ItemEntryTable/ItemEntryRow.tsx

@@ -16,6 +16,7 @@ export interface ItemEntryRowProps {
   row: ItemRevisionModel;
   namespaces: NamespaceModel[];
   isLast: boolean;
+  tabIndex: number;
 }
 
 export interface ItemEntryRowState {
@@ -104,6 +105,7 @@ export class ItemEntryRow extends React.Component<
           onChange={event => onChange(+event.target.value)}
           onBlur={this.handleRowUpdate}
           disabled={!row.hasBankKey}
+          tabIndex={this.props.tabIndex + 1}
         />
       </td>
     );
@@ -127,6 +129,7 @@ export class ItemEntryRow extends React.Component<
           value={rowValue || ""}
           onChange={event => onChange(+event.target.value)}
           onBlur={this.handleRowUpdate}
+          tabIndex={this.props.tabIndex + 2}
         />
       </td>
     );
@@ -160,6 +163,7 @@ export class ItemEntryRow extends React.Component<
           options={options}
           onChange={this.handleNamespace}
           wrapperClass="section-dd"
+          tabIndex={this.props.tabIndex}
         />
       </td>
     );
@@ -169,11 +173,11 @@ export class ItemEntryRow extends React.Component<
     return (
       <td className="delete-row">
         <input
-          className="delete-button btn btn-primary bg-light"
+          className="from-control delete-button btn btn-primary bg-light"
           onClick={this.deleteRow}
           disabled={this.props.isLast}
-          type="button"
           value="X"
+          tabIndex={this.props.tabIndex + 3}
         />
       </td>
     );

src/ItemEntryTable/ItemEntryTable.tsx

@@ -102,52 +102,57 @@ export class ItemEntryTable extends React.Component<
           <th scope="col">Bank</th>
           <th scope="col">Item</th>
           <th scope="col" />
-          <th />
         </tr>
       </thead>
     );
   }
 
   renderBody() {
-    const rows = this.state.itemRows.map((row, idx) => (
-      <ItemEntryRow
-        row={row}
-        onRowUpdate={editRow => this.handleRowUpdate(editRow, idx)}
-        onDeleteRow={deleteRow => this.handleDeleteRow(idx)}
-        namespaces={this.props.namespaces}
-        key={idx}
-        id={idx}
-        isLast={idx === this.state.itemRows.length - 1}
-      />
-    ));
-
+    let index = 1;
+    const rows = this.state.itemRows.map((row, idx) => {
+      index = idx;
+      return (
+        <ItemEntryRow
+          row={row}
+          onRowUpdate={editRow => this.handleRowUpdate(editRow, idx)}
+          onDeleteRow={deleteRow => this.handleDeleteRow(idx)}
+          namespaces={this.props.namespaces}
+          key={idx}
+          id={idx}
+          isLast={idx === this.state.itemRows.length - 1}
+          tabIndex={idx * 4 + 1}
+        />
+      );
+    });
+    index++;
     return (
       <tbody>
         {rows}
-        {this.renderFooter()}
+        {this.renderFooter(index * 4 + 1)}
       </tbody>
     );
   }
 
-  renderFooter() {
+  renderFooter(tabIndex: number) {
     return (
       <tr>
         <td />
         <td>
           <input
             className="btn btn-primary submit-button bg-primary"
             onClick={click => this.handleSubmit()}
-            type="button"
             value="apply"
+            tabIndex={tabIndex}
           />
           <input
             className="btn btn-default clear-button bg-light"
             onClick={click => this.handleClearItems()}
-            type="button"
             value="clear all"
+            tabIndex={tabIndex + 1}
           />
         </td>
         <td />
+        <td />
       </tr>
     );
   }

src/Select/Select.tsx

@@ -14,6 +14,7 @@ export interface SelectProps {
   className?: string;
   labelClass?: string;
   wrapperClass?: string;
+  tabIndex?: number;
 }
 
 /**
@@ -37,6 +38,7 @@ export const Select: React.SFC<SelectProps> = props => {
         onChange={e => props.onChange(e.target.value)}
         value={props.selected}
         disabled={props.disabled}
+        tabIndex={props.tabIndex}
       >
         {selectOptions}
       </select>