Using display options with layoutCandidates. Fixes #1831

src/lib/components/CandidateBox.ts

@@ -5,16 +5,19 @@ import {
   CandidateBoxParams,
   CandidateBoxRenderParams,
   CandidateBoxShowParams,
+  KeyboardOptions,
 } from "./../interfaces";
 
 class CandidateBox {
   utilities: Utilities;
+  options: KeyboardOptions;
   candidateBoxElement!: HTMLDivElement;
   pageIndex = 0;
   pageSize;
 
-  constructor({ utilities }: CandidateBoxParams) {
+  constructor({ utilities, options }: CandidateBoxParams) {
     this.utilities = utilities;
+    this.options = options;
     Utilities.bindMethods(CandidateBox, this);
     this.pageSize = this.utilities.getOptions().layoutCandidatesPageSize || 5;
   }
@@ -82,7 +85,7 @@ class CandidateBox {
       };
 
       candidateListLIElement.className = "hg-candidate-box-list-item";
-      candidateListLIElement.textContent = candidateListItem;
+      candidateListLIElement.textContent = this.options.display?.[candidateListItem] || candidateListItem;
       candidateListLIElement.onclick = (e = getMouseEvent()) =>
         onItemSelected(candidateListItem, e);
 

src/lib/components/Keyboard.ts

@@ -215,6 +215,7 @@ class SimpleKeyboard {
     this.candidateBox = this.options.enableLayoutCandidates
       ? new CandidateBox({
           utilities: this.utilities,
+          options: this.options,
         })
       : null;
 
@@ -878,6 +879,7 @@ class SimpleKeyboard {
         this.candidateBox.destroy();
         this.candidateBox = new CandidateBox({
           utilities: this.utilities,
+          options: this.options,
         });
       }
     }

src/lib/interfaces.ts

@@ -22,7 +22,8 @@ export interface KeyboardInput {
 }
 
 export type CandidateBoxParams = {
-    utilities: Utilities
+    utilities: Utilities,
+    options: KeyboardOptions
 }
 
 export type CandidateBoxShowParams = {