fix: focus editor only after it is ready (#7235) (#7291)

packages/grid-pro/src/vaadin-grid-pro-edit-column-mixin.js

@@ -267,8 +267,11 @@ export const GridProEditColumnMixin = (superClass) =>
       this._setEditorValue(editor, get(this.path, model.item));
       editor._grid = this._grid;
 
-      this._focusEditor(editor);
-      requestAnimationFrame(() => this._focusEditor(editor));
+      if (editor.updateComplete) {
+        editor.updateComplete.then(() => this._focusEditor(editor));
+      } else {
+        this._focusEditor(editor);
+      }
     }
 
     /**

packages/grid-pro/test/edit-column-type.common.js

@@ -6,11 +6,13 @@ import {
   fixtureSync,
   focusin,
   focusout,
+  isFirefox,
   keyDownChar,
   nextFrame,
   nextRender,
   space,
 } from '@vaadin/testing-helpers';
+import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import { createItems, dblclick, flushGrid, getCellEditor, getContainerCell, onceOpened } from './helpers.js';
 
@@ -97,8 +99,9 @@ describe('edit column editor type', () => {
       expect(checkbox.checked).to.be.equal(grid.items[0].married);
     });
 
-    it('should set focus-ring on the checkbox', () => {
+    it('should set focus-ring on the checkbox', async () => {
       dblclick(cell._content);
+      await nextFrame();
       checkbox = column._getEditorComponent(cell);
       expect(checkbox.hasAttribute('focus-ring')).to.be.true;
     });
@@ -362,5 +365,15 @@ describe('edit column editor type', () => {
       editor = column._getEditorComponent(cell);
       expect(editor).to.be.not.ok;
     });
+
+    (isFirefox ? it.skip : it)('should not start edit with first character selected', async () => {
+      column = grid.querySelector('[path="name"]');
+      cell = getContainerCell(grid.$.items, 0, columns.indexOf(column));
+      cell.focus();
+      await sendKeys({ down: 'a' });
+      await sendKeys({ down: 'b' });
+      await sendKeys({ down: 'Enter' });
+      expect(cell._content.textContent).to.equal('ab');
+    });
   });
 });