Skip to content

Commit

Permalink
fix(autocomplete): Autocomplete drop container should take content wi…
Browse files Browse the repository at this point in the history
…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 denis-taran/autocomplete#102
  • Loading branch information
ghiscoding authored Feb 9, 2023
1 parent 99677f0 commit 9690a38
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 0 deletions.
3 changes: 3 additions & 0 deletions packages/common/src/editors/autocompleterEditor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>>;
Expand Down
3 changes: 3 additions & 0 deletions packages/common/src/filters/autocompleterFilter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down

0 comments on commit 9690a38

Please sign in to comment.