From e37bb281ee83c25e9c4e15930e06bf9a044c65e9 Mon Sep 17 00:00:00 2001 From: Ghislain B Date: Tue, 7 May 2024 15:43:56 -0400 Subject: [PATCH] fix(common): Select Editor should always close with Escape key (#1512) * fix(common): Select Editor should always close with Escape key - the issue was fixed in upstream lib ms-select-vanilla --- .../vite-demo-vanilla-bundle/package.json | 2 +- packages/common/package.json | 2 +- .../__tests__/multipleSelectEditor.spec.ts | 4 ++-- packages/common/src/editors/longTextEditor.ts | 22 +++++++++---------- packages/common/src/editors/selectEditor.ts | 2 +- pnpm-lock.yaml | 12 +++++----- 6 files changed, 22 insertions(+), 22 deletions(-) diff --git a/examples/vite-demo-vanilla-bundle/package.json b/examples/vite-demo-vanilla-bundle/package.json index 2a77f6e1e..98edc3bba 100644 --- a/examples/vite-demo-vanilla-bundle/package.json +++ b/examples/vite-demo-vanilla-bundle/package.json @@ -28,7 +28,7 @@ "bulma": "^1.0.0", "dompurify": "^3.1.2", "fetch-jsonp": "^1.3.0", - "multiple-select-vanilla": "^3.1.3", + "multiple-select-vanilla": "^3.1.4", "rxjs": "^7.8.1", "vanilla-calendar-picker": "^2.11.4", "whatwg-fetch": "^3.6.20" diff --git a/packages/common/package.json b/packages/common/package.json index 64d6f345d..e8af63ad4 100644 --- a/packages/common/package.json +++ b/packages/common/package.json @@ -74,7 +74,7 @@ "autocompleter": "^9.2.1", "dequal": "^2.0.3", "excel-builder-vanilla": "3.0.1", - "multiple-select-vanilla": "^3.1.3", + "multiple-select-vanilla": "^3.1.4", "sortablejs": "^1.15.2", "un-flatten-tree": "^2.0.12", "vanilla-calendar-picker": "^2.11.4" diff --git a/packages/common/src/editors/__tests__/multipleSelectEditor.spec.ts b/packages/common/src/editors/__tests__/multipleSelectEditor.spec.ts index 2c2efaa12..242246506 100644 --- a/packages/common/src/editors/__tests__/multipleSelectEditor.spec.ts +++ b/packages/common/src/editors/__tests__/multipleSelectEditor.spec.ts @@ -89,11 +89,11 @@ describe('MultipleSelectEditor', () => { gridOptionMock.translater = translateService; editor = new MultipleSelectEditor(editorArguments, 0); const editorCount = document.body.querySelectorAll('select.ms-filter.editor-gender').length; - const spy = jest.spyOn(editor, 'show'); + jest.runAllTimers(); // fast-forward timer - expect(spy).toHaveBeenCalled(); expect(editorCount).toBe(1); + expect(editor.msInstance?.getOptions().isOpen).toBeTruthy(); }); it('should call "setValue" with a single string and expect the string to be returned as an array when calling "getValue"', () => { diff --git a/packages/common/src/editors/longTextEditor.ts b/packages/common/src/editors/longTextEditor.ts index 5ceaeb00e..2ca203515 100644 --- a/packages/common/src/editors/longTextEditor.ts +++ b/packages/common/src/editors/longTextEditor.ts @@ -52,14 +52,14 @@ export class LongTextEditor implements Editor { throw new Error('[Slickgrid-Universal] Something is wrong with this grid, an Editor must always have valid arguments.'); } this.grid = args.grid; - this.gridOptions = args.grid && args.grid.getOptions() as GridOption; + this.gridOptions = args.grid?.getOptions() as GridOption; const options = this.gridOptions || this.args.column.params || {}; if (options?.translater) { this._translater = options.translater; } // get locales provided by user in forRoot or else use default English locales via the Constants - this._locales = this.gridOptions && this.gridOptions.locales || Constants.locales; + this._locales = this.gridOptions?.locales || Constants.locales; this._bindEventService = new BindingEventService(); this.init(); @@ -258,7 +258,7 @@ export class LongTextEditor implements Editor { // validate the value before applying it (if not valid we'll set an empty string) const validation = this.validate(undefined, state); - const newValue = (validation && validation.valid) ? state : ''; + const newValue = validation?.valid ? state : ''; // set the new value to the item datacontext if (isComplexObject) { @@ -409,24 +409,24 @@ export class LongTextEditor implements Editor { this.disable(isCellEditable === false); } - protected handleKeyDown(event: KeyboardEvent) { - const key = event.key; + protected handleKeyDown(e: KeyboardEvent) { + const key = e.key; this._isValueTouched = true; if (!this.args.compositeEditorOptions) { - if ((key === 'Enter' && event.ctrlKey) || (event.ctrlKey && event.key.toUpperCase() === 'S')) { - event.preventDefault(); + if ((key === 'Enter' && e.ctrlKey) || (e.ctrlKey && e.key.toUpperCase() === 'S')) { + e.preventDefault(); this.save(); } else if (key === 'Escape') { - event.preventDefault(); + e.preventDefault(); this.cancel(); - } else if (key === 'Tab' && event.shiftKey) { - event.preventDefault(); + } else if (key === 'Tab' && e.shiftKey) { + e.preventDefault(); if (this.args && this.grid) { this.grid.navigatePrev(); } } else if (key === 'Tab') { - event.preventDefault(); + e.preventDefault(); if (this.args && this.grid) { this.grid.navigateNext(); } diff --git a/packages/common/src/editors/selectEditor.ts b/packages/common/src/editors/selectEditor.ts index ea5715549..74d6e95ff 100644 --- a/packages/common/src/editors/selectEditor.ts +++ b/packages/common/src/editors/selectEditor.ts @@ -754,7 +754,7 @@ export class SelectEditor implements Editor { this._msInstance = multipleSelect(selectElement, this.editorElmOptions) as MultipleSelectInstance; this.editorElm = this._msInstance.getParentElement(); if (!this.isCompositeEditor) { - this.delayOpening >= 0 ? setTimeout(() => this.show()) : this.show(); + this.show(this.delayOpening); } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 42fe71461..67e2be75f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -186,8 +186,8 @@ importers: specifier: ^1.3.0 version: 1.3.0 multiple-select-vanilla: - specifier: ^3.1.3 - version: 3.1.3 + specifier: ^3.1.4 + version: 3.1.4 rxjs: specifier: ^7.8.1 version: 7.8.1 @@ -250,8 +250,8 @@ importers: specifier: 3.0.1 version: 3.0.1 multiple-select-vanilla: - specifier: ^3.1.3 - version: 3.1.3 + specifier: ^3.1.4 + version: 3.1.4 sortablejs: specifier: ^1.15.2 version: 1.15.2 @@ -6903,8 +6903,8 @@ packages: minimatch: 9.0.4 dev: true - /multiple-select-vanilla@3.1.3: - resolution: {integrity: sha512-EcnBCgI/j5ilM3w+TcB3HhVixsN4yncXKi/Wv9EZnPy9PeLMasD0doyj/wxrlvmH0omaS0y9y1rdIZt2nbJaaw==} + /multiple-select-vanilla@3.1.4: + resolution: {integrity: sha512-tYZOelEDbTl7p0hu/l1WLUWCgQuoLTT70bJQIEtO404kVbNUHKWmesF8U23jqekOL1+WlYm9cARYI8eci42g8w==} dependencies: '@types/trusted-types': 2.0.7 dev: false