fix(autocomplete): Autocomplete drop container should take content wi…

…dth (#897)

- 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 kraaden/autocomplete#102

packages/common/src/editors/autocompleterEditor.ts

@@ -617,6 +617,9 @@ export class AutocompleterEditor<T extends AutocompleteItem = any> 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<AutocompleteSettings<any>>;

packages/common/src/filters/autocompleterFilter.ts

@@ -423,6 +423,9 @@ export class AutocompleterFilter<T extends AutocompleteItem = any> 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);