fix(editors): autocomplete editor spinner aligned right in mass update (

#162)

* fix(editors): autocomplete editor spinner aligned right in mass update

examples/webpack-demo-vanilla-bundle/src/examples/example02.ts

@@ -55,6 +55,9 @@ export class Example2 {
     this.eventService.addElementEventListener(gridContainerElm, 'onbeforeexporttoexcel', () => console.log('onBeforeExportToExcel'));
     this.eventService.addElementEventListener(gridContainerElm, 'onafterexporttoexcel', () => console.log('onAfterExportToExcel'));
     this.sgb = new Slicker.GridBundle(gridContainerElm, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, this.dataset);
+
+    // you could group by duration on page load (must be AFTER the DataView is created, so after GridBundle)
+    // this.groupByDuration();
   }
 
   dispose() {

packages/common/src/editors/autoCompleteEditor.ts

@@ -455,8 +455,16 @@ export class AutoCompleteEditor implements Editor {
         }
       });
 
-    // add a <span> in order to add spinner styling
-    $(`<span></span>`).appendTo(this.args.container);
+    // append the new DOM element to the slick cell container,
+    // we need the autocomplete-container so that the spinner is aligned properly with the Composite Editor
+    if (this._$editorElm && typeof this._$editorElm.appendTo === 'function') {
+      const $container = $(`<div class="autocomplete-container"></div>`);
+      $container.appendTo(this.args.container);
+      this._$editorElm.appendTo($container);
+
+      // add a <span> in order to add spinner styling
+      $(`<span></span>`).appendTo($container);
+    }
 
     // user might pass his own autocomplete options
     const autoCompleteOptions: AutocompleteOption = this.columnEditor.editorOptions;