From da3bbe21b899fdcb70a2366145d00e20eb039bd2 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Thu, 9 Feb 2023 11:59:14 -0500 Subject: [PATCH] fix(autocomplete): Autocomplete drop container should take content width - by default the Kraaden Autocomplete lib sets the drop container width to be the same as the input width but that isn't a good UX in a datagrid so we need to unset the width and let pure CSS use auto width - ref https://github.com/kraaden/autocomplete/issues/102 --- packages/common/src/editors/autocompleterEditor.ts | 3 +++ packages/common/src/filters/autocompleterFilter.ts | 3 +++ 2 files changed, 6 insertions(+) diff --git a/packages/common/src/editors/autocompleterEditor.ts b/packages/common/src/editors/autocompleterEditor.ts index 7ba436ea0..7ae4ec22d 100644 --- a/packages/common/src/editors/autocompleterEditor.ts +++ b/packages/common/src/editors/autocompleterEditor.ts @@ -617,6 +617,9 @@ export class AutocompleterEditor implements Ed debounceWaitMs: 200, className: `slick-autocomplete ${this.editorOptions?.className ?? ''}`.trim(), emptyMsg: this.gridOptions.enableTranslate && this._translater?.translate ? this._translater.translate('NO_ELEMENTS_FOUND') : this._locales?.TEXT_NO_ELEMENTS_FOUND ?? 'No elements found', + customize: (_input, _inputRect, container) => { + container.style.width = ''; // unset width that was set internally by the Autopleter lib + }, onSelect: this.handleSelect.bind(this), ...this.editorOptions, } as Partial>; diff --git a/packages/common/src/filters/autocompleterFilter.ts b/packages/common/src/filters/autocompleterFilter.ts index 18c98335d..b13735817 100644 --- a/packages/common/src/filters/autocompleterFilter.ts +++ b/packages/common/src/filters/autocompleterFilter.ts @@ -423,6 +423,9 @@ export class AutocompleterFilter implements Fi debounceWaitMs: 200, className: `slick-autocomplete ${this.filterOptions?.className ?? ''}`.trim(), emptyMsg: this.gridOptions.enableTranslate && this.translaterService?.translate ? this.translaterService.translate('NO_ELEMENTS_FOUND') : this._locales?.TEXT_NO_ELEMENTS_FOUND ?? 'No elements found', + customize: (_input, _inputRect, container) => { + container.style.width = ''; // unset width that was set internally by the Autopleter lib + }, onSelect: (item: AutocompleteSearchItem) => { this.isItemSelected = true; this.handleSelect(item);