slick-table 1.1.40 → 1.1.42

package/dist/styles/slick-table.scss

@@ -0,0 +1,19 @@
+#slick-table-autocomplete {
+  background-color: white;
+  z-index: 1;
+  position: absolute;
+  color: #1E456F;
+  box-shadow: gray 0px 0px 5px 1px;
+  font-size: 0.75rem;
+
+  strong {
+    color: rgb(0, 123, 255)
+  }
+
+  div.active,
+  div:hover {
+    cursor: pointer;
+    background-color: #e8f4fe;
+  }
+}
+

package/dist/types/shared/lib/slickgrid/lib/editors/Autocomplete/Autocomplete.d.ts

@@ -11,12 +11,13 @@ export declare abstract class Autocomplete implements Editor {
     protected navOnLR?: boolean;
     applyValue(item: any, state: any): void;
     closeAllList(): void;
+    createList(): void;
     destroy(): void;
     focus(): void;
     init(): void;
     isValueChanged(): boolean;
     loadValue(item: ISlickRow): void;
-    makeVisible(list: HTMLDivElement): void;
+    makeVisible(): void;
     abstract onClick(event: MouseEvent): void;
     abstract onInput(event: Event): void;
     onKeydown(event: KeyboardEvent): void;

package/dist/types/shared/lib/slickgrid/lib/editors/Autocomplete/Autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../../../../src/shared/lib/slickgrid/lib/editors/Autocomplete/Autocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,MAAM,EACN,eAAe,EACf,sBAAsB,EAEtB,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,8BAAsB,YAAa,YAAW,MAAM;IACnD,QAAQ,CAAC,IAAI,EAAE,eAAe,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;IAC9C,SAAS,CAAC,YAAY,SAAM;IAC5B,SAAS,CAAC,YAAY,SAAM;IAC5B,SAAS,CAAC,EAAE,SAAkB;IAC9B,SAAS,CAAC,KAAK,EAAE,gBAAgB,CAAmC;IAC7D,cAAc,EAAE,MAAM,EAAE,CAA6C;IAC5E,SAAS,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC;IAChC,SAAS,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAE5B,UAAU,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAGvC,YAAY,IAAI,IAAI;IAKpB,OAAO,IAAI,IAAI;IAMf,KAAK,IAAI,IAAI;IAGb,IAAI,IAAI,IAAI;IAWZ,cAAc,IAAI,OAAO;IAMzB,SAAS,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI;IAOhC,WAAW,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAoBvC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IACzC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IACpC,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IA8BrC,YAAY,CAAC,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,GAAG,IAAI;IAKvD,eAAe,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IAW5C,cAAc,IAAI,MAAM;IAGxB,SAAS,CAAC,IAAI,EAAE,gBAAgB,CAAC,cAAc,CAAC,GAAG,IAAI;IASvD,QAAQ,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAC1C,QAAQ,IAAI,sBAAsB;CAelC"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../../../../src/shared/lib/slickgrid/lib/editors/Autocomplete/Autocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,MAAM,EACN,eAAe,EACf,sBAAsB,EAGtB,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,8BAAsB,YAAa,YAAW,MAAM;IACnD,QAAQ,CAAC,IAAI,EAAE,eAAe,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;IAC9C,SAAS,CAAC,YAAY,SAAM;IAC5B,SAAS,CAAC,YAAY,SAAM;IAC5B,SAAS,CAAC,EAAE,SAA8B;IAC1C,SAAS,CAAC,KAAK,EAAE,gBAAgB,CAAmC;IAC7D,cAAc,EAAE,MAAM,EAAE,CAA6C;IAC5E,SAAS,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC;IAChC,SAAS,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAE5B,UAAU,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAGvC,YAAY,IAAI,IAAI;IAKpB,UAAU;IAYV,OAAO,IAAI,IAAI;IAMf,KAAK,IAAI,IAAI;IAGb,IAAI,IAAI,IAAI;IAWZ,cAAc,IAAI,OAAO;IAMzB,SAAS,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI;IAOhC,WAAW,IAAI,IAAI;IAuBnB,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IACzC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IACpC,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IA8BrC,YAAY,CAAC,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,GAAG,IAAI;IAKvD,eAAe,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IAW5C,cAAc,IAAI,MAAM;IAGxB,SAAS,CAAC,IAAI,EAAE,gBAAgB,CAAC,cAAc,CAAC,GAAG,IAAI;IASvD,QAAQ,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAC1C,QAAQ,IAAI,sBAAsB;CAelC"}

package/dist/types/shared/lib/slickgrid/lib/editors/Autocomplete/EditorAutocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorAutocomplete.d.ts","sourceRoot":"","sources":["../../../../../../../../src/shared/lib/slickgrid/lib/editors/Autocomplete/EditorAutocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,UAAU,EAAiB,MAAM,WAAW,CAAC;AAK/E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,qBAAa,kBAAkB,CAC9B,KAAK,GAAG,GAAG,EACX,CAAC,SAAS,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,EACvC,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CACtC,SAAQ,YAAY;IAGF,IAAI,EAAE,eAAe,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IAFrD,SAAS,CAAC,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;gBAEpB,IAAI,EAAE,eAAe,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IAuBrD,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAK3B,OAAO,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAKhC,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;CAkBjC"}
+{"version":3,"file":"EditorAutocomplete.d.ts","sourceRoot":"","sources":["../../../../../../../../src/shared/lib/slickgrid/lib/editors/Autocomplete/EditorAutocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,MAAM,EACN,eAAe,EAEf,UAAU,EAEV,MAAM,WAAW,CAAC;AAKnB,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,qBAAa,kBAAkB,CAC9B,KAAK,GAAG,GAAG,EACX,CAAC,SAAS,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,EACvC,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CACtC,SAAQ,YAAY;IAGF,IAAI,EAAE,eAAe,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IAFrD,SAAS,CAAC,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;gBAEpB,IAAI,EAAE,eAAe,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IAuBrD,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAK3B,OAAO,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAShC,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;CAgBjC"}

package/dist/types/shared/lib/slickgrid/lib/editors/Autocomplete/EditorSelectWithSearch.d.ts

@@ -7,6 +7,7 @@ export declare class EditorSelectWithSearch<TData = any, C extends Column<TData>
     protected reversedHash: Record<string, string>;
     constructor(args: EditorArguments<TData, C, O>);
     applyValue(item: any, state: any): void;
+    isValueChanged(): boolean;
     loadValue(item: ISlickRow): void;
     onInput(event: Event): void;
     onClick(event: MouseEvent): void;

package/dist/types/shared/lib/slickgrid/lib/editors/Autocomplete/EditorSelectWithSearch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorSelectWithSearch.d.ts","sourceRoot":"","sources":["../../../../../../../../src/shared/lib/slickgrid/lib/editors/Autocomplete/EditorSelectWithSearch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAGhE,OAAO,EAAW,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,qBAAa,sBAAsB,CAClC,KAAK,GAAG,GAAG,EACX,CAAC,SAAS,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,EACvC,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CACtC,SAAQ,YAAY;IAIF,IAAI,EAAE,eAAe,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IAHrD,SAAS,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,SAAS,CAAC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;gBAE5B,IAAI,EAAE,eAAe,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IAmBrD,UAAU,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAIvC,SAAS,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI;IAQhC,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAK3B,OAAO,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAKhC,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;CAsBjC"}
+{"version":3,"file":"EditorSelectWithSearch.d.ts","sourceRoot":"","sources":["../../../../../../../../src/shared/lib/slickgrid/lib/editors/Autocomplete/EditorSelectWithSearch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAGhE,OAAO,EAAW,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,qBAAa,sBAAsB,CAClC,KAAK,GAAG,GAAG,EACX,CAAC,SAAS,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,EACvC,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CACtC,SAAQ,YAAY;IAIF,IAAI,EAAE,eAAe,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IAHrD,SAAS,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,SAAS,CAAC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;gBAE5B,IAAI,EAAE,eAAe,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IAmBrD,UAAU,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAIvC,cAAc,IAAI,OAAO;IAUzB,SAAS,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI;IAQhC,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAK3B,OAAO,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAKhC,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;CAkBjC"}

package/dist/types/shared/lib/slickgrid/ui/SlickgridTable/lib/hooks/useGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGrid.d.ts","sourceRoot":"","sources":["../../../../../../../../../src/shared/lib/slickgrid/ui/SlickgridTable/lib/hooks/useGrid.ts"],"names":[],"mappings":"AACA,OAAO,EACN,OAAO,EACP,oBAAoB,EACpB,qBAAqB,EAOrB,MAAM,WAAW,CAAC;AAYnB,OAAO,EAAE,KAAK,EAAkB,MAAM,aAAa,CAAC;AAEpD,wBAAgB,OAAO,CAAC,EACvB,aAAiC,EACjC,kBAAkB,EAClB,SAAiB,EACjB,YAAqB,EACrB,OAAO,EACP,eAAe,EACf,MAAM,EACN,cAAqB,EACrB,KAAK,EACL,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,OAAO,EACP,UAAU,EACV,mBAAmB,EACnB,iBAAkC,EAClC,qBAAqB,EACrB,OAAY,EACZ,KAAK,GACL,EAAE,KAAK,GAAG;IACV,WAAW,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;IAC3C,YAAY,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;CAC7C,QA2HA"}
+{"version":3,"file":"useGrid.d.ts","sourceRoot":"","sources":["../../../../../../../../../src/shared/lib/slickgrid/ui/SlickgridTable/lib/hooks/useGrid.ts"],"names":[],"mappings":"AACA,OAAO,EACN,OAAO,EACP,oBAAoB,EACpB,qBAAqB,EAOrB,MAAM,WAAW,CAAC;AAYnB,OAAO,EAAE,KAAK,EAAkB,MAAM,aAAa,CAAC;AAEpD,wBAAgB,OAAO,CAAC,EACvB,aAAiC,EACjC,kBAAkB,EAClB,SAAiB,EACjB,YAAqB,EACrB,OAAO,EACP,eAAe,EACf,MAAM,EACN,cAAqB,EACrB,KAAK,EACL,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,OAAO,EACP,UAAU,EACV,mBAAmB,EACnB,iBAAkC,EAClC,qBAAqB,EACrB,OAAY,EACZ,KAAK,GACL,EAAE,KAAK,GAAG;IACV,WAAW,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;IAC3C,YAAY,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;CAC7C,QA6HA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slick-table",
-  "version": "1.1.40",
+  "version": "1.1.42",
   "description": "Enhanced version of SlickGrid library",
   "private": false,
   "type": "module",
@@ -13,6 +13,7 @@
       "import": "./dist/index.es.js",
       "require": "./dist/index.cjs.js"
     },
+    "./styles": "./dist/styles/slick-table.scss",
     "./package.json": "./package.json"
   },
   "files": [
@@ -36,6 +37,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "postbuild": "node scripts/copy-styles.mjs",
     "lint": "eslint .",
     "pack": "npm pack --dry-run",
     "version:patch": "npm version patch",

package/src/app/styles/slick-table.scss

@@ -0,0 +1,19 @@
+#slick-table-autocomplete {
+  background-color: white;
+  z-index: 1;
+  position: absolute;
+  color: #1E456F;
+  box-shadow: gray 0px 0px 5px 1px;
+  font-size: 0.75rem;
+
+  strong {
+    color: rgb(0, 123, 255)
+  }
+
+  div.active,
+  div:hover {
+    cursor: pointer;
+    background-color: #e8f4fe;
+  }
+}
+

package/src/index.scss

@@ -1,3 +1,4 @@
+@use './app/styles/slick-table' as *;
 @use './app/styles/slickgrid' as *;
 @use './app/styles/global' as *;
 @use './app/styles/icons' as *;

package/src/shared/lib/slickgrid/lib/editors/Autocomplete/Autocomplete.ts

@@ -2,6 +2,7 @@ import {
 	Editor,
 	EditorArguments,
 	EditorValidationResult,
+	ElementPosition,
 	keyCode,
 } from "slickgrid";
 
@@ -12,7 +13,7 @@ export abstract class Autocomplete implements Editor {
 	abstract args: EditorArguments<any, any, any>;
 	protected currentFocus = -1;
 	protected defaultValue = "";
-	protected id = "autocomplete";
+	protected id = "slick-table-autocomplete";
 	protected input: HTMLInputElement = document.createElement("input");
 	public keyCaptureList: number[] = [keyCode.UP, keyCode.DOWN, keyCode.ENTER];
 	protected list?: HTMLDivElement;
@@ -26,6 +27,18 @@ export abstract class Autocomplete implements Editor {
 		this.list = undefined;
 		this.currentFocus = -1;
 	}
+	createList() {
+		this.list = document.createElement("div");
+		const container = document.getElementById("root");
+		if (!container) return;
+		container.appendChild(this.list);
+		this.list.setAttribute("id", this.id);
+		const { top, left, right } = this.args.position as ElementPosition;
+		const rowHeight = this.args.grid.getOptions().rowHeight || 25;
+		this.list.style.top = `${top + rowHeight}px`;
+		this.list.style.left = `${left}px`;
+		this.list.style.minWidth = `${right - left}px`;
+	}
 	destroy(): void {
 		this.input.removeEventListener("input", this.onInput.bind(this));
 		this.input.removeEventListener("keydown", this.onKeydown.bind(this));
@@ -59,24 +72,27 @@ export abstract class Autocomplete implements Editor {
 		this.input.focus();
 		this.input.select();
 	}
-	makeVisible(list: HTMLDivElement): void {
-		const canvas = list.closest(".slick-viewport");
+	makeVisible(): void {
+		if (!this.list) return;
+		const canvas = this.args.container.closest(".slick-viewport");
 		if (!canvas) return;
-		const { bottom: listBottom, right: listRight } =
-			list.getBoundingClientRect();
+		const {
+			bottom: listBottom,
+			left: listLeft,
+			right: listRight,
+			top: listTop,
+		} = this.list.getBoundingClientRect();
 		const { bottom: canvasBottom, right: canvasRight } =
 			canvas.getBoundingClientRect();
-		list.style.left = "0";
 		if (listBottom >= canvasBottom) {
-			const rowHeight = this.args.grid.getOptions().rowHeight;
-			list.style.position = "absolute";
-			list.style.bottom = `${rowHeight}px`;
-			list.style.top = "auto";
+			const rowHeight = this.args.grid.getOptions().rowHeight || 25;
+			const listHeight = listBottom - listTop;
+			this.list.style.top = `${listTop - listHeight - rowHeight}px`;
 		}
 		if (listRight >= canvasRight) {
-			list.style.position = "absolute";
-			list.style.right = "0";
-			list.style.left = "auto";
+			const { right: cellRight } = this.args.container.getBoundingClientRect();
+			const exceeding = listRight - cellRight;
+			this.list.style.left = `${listLeft - exceeding}px`;
 		}
 	}
 	abstract onClick(event: MouseEvent): void;

package/src/shared/lib/slickgrid/lib/editors/Autocomplete/EditorAutocomplete.ts

@@ -1,4 +1,10 @@
-import { Column, EditorArguments, GridOption, SlickDataView } from "slickgrid";
+import {
+	Column,
+	EditorArguments,
+	ElementPosition,
+	GridOption,
+	SlickDataView,
+} from "slickgrid";
 
 import { escapeSpecialChar } from "shared/lib/regexp";
 import { IColumn } from "shared/model/types";
@@ -41,14 +47,16 @@ export class EditorAutocomplete<
 		this.showOptions((event.target as HTMLInputElement).value);
 	}
 	onClick(event: MouseEvent): void {
-		const div = event.target as HTMLDivElement;
-		this.input.value = div.getElementsByTagName("input")[0].value;
+		const targetElement = event.target as HTMLElement; // either <div> or <strong>
+		const htmlInputElement = targetElement
+			.closest("div")
+			?.querySelector("input");
+		this.input.value = htmlInputElement?.value || "";
 		this.closeAllList();
+		this.args.grid.navigateNext();
 	}
 	showOptions(search: string): void {
-		this.list = document.createElement("div");
-		this.list.setAttribute("id", this.id);
-		this.args.container.appendChild(this.list);
+		this.createList();
 		this.suggestionsList.forEach((name: string) => {
 			const hasOverlap = name.match(new RegExp(escapeSpecialChar(search), "i"));
 			if (hasOverlap) {
@@ -61,6 +69,6 @@ export class EditorAutocomplete<
 				this.list?.appendChild(listItem);
 			}
 		});
-		this.makeVisible(this.list);
+		this.makeVisible();
 	}
 }

package/src/shared/lib/slickgrid/lib/editors/Autocomplete/EditorSelectWithSearch.ts

@@ -36,6 +36,16 @@ export class EditorSelectWithSearch<
 		item[this.args.column.field] = this.reversedHash[state];
 	}
 
+	isValueChanged(): boolean {
+		if (!this.reversedHash[this.input.value]) {
+			this.input.value = this.defaultValue;
+		}
+		return (
+			!(this.input.value == "" && this.defaultValue == null) &&
+			this.input.value != this.defaultValue
+		);
+	}
+
 	loadValue(item: ISlickRow): void {
 		this.defaultValue = this.hash[item[this.args.column.id]] || "";
 		this.input.value = this.defaultValue;
@@ -55,11 +65,7 @@ export class EditorSelectWithSearch<
 		this.closeAllList();
 	}
 	showOptions(search: string): void {
-		this.list = document.createElement("div");
-		this.list.setAttribute("id", this.id);
-		this.list.style.width = "fit-content";
-		this.list.style.textAlign = "left";
-		this.args.container.appendChild(this.list);
+		this.createList();
 		Object.entries(this.hash).forEach(([key, value]) => {
 			const hasOverlap = value.match(
 				new RegExp(escapeSpecialChar(search), "i"),
@@ -74,6 +80,6 @@ export class EditorSelectWithSearch<
 				this.list?.appendChild(listItem);
 			}
 		});
-		this.makeVisible(this.list);
+		this.makeVisible();
 	}
 }

package/src/shared/lib/slickgrid/ui/SlickgridTable/lib/hooks/useGrid.ts

@@ -100,9 +100,6 @@ export function useGrid({
 		}
 		applyCellCssStyles?.(grid);
 
-		table.hotKeysBehavior.pushToCommandQueue(grid);
-		// table.notifyObservers();
-
 		return () => {
 			headerButtonsPlugin.onCommand.unsubscribe(onHeaderButtonCommand);
 			onHeaderMenuCommand &&
@@ -168,5 +165,10 @@ export function useGrid({
 		table.totalCalculator?.calculate(grid);
 		table.notifyObservers();
 		columnSorter.restoreSorting(table);
+		// add initial items to command queue after column sorting has been applied
+		table.hotKeysBehavior.pushToCommandQueue(grid);
+		return () => {
+			table.hotKeysBehavior.resetQueue();
+		};
 	}, [columns, items]);
 }