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

* fix: defer focus in order to have editor ready before

* test: fix unit test for firefox

* test: await next render before assertion

* test: add another await next render after the first keydown

* Revert "test: add another await next render after the first keydown"

This reverts commit 3a62f57.

* Revert "test: await next render before assertion"

This reverts commit d5939d1.

* test: update material visual test reference image

* fix: set edit initiator char explicitly

* test: revert skip test

* fix: do not select input when initialized with character

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

Co-authored-by: Sergey Vinogradov <mr.vursen@gmail.com>

* refactor: extract input selection logic from editor focus

* refactor: change name of the new property

* refactor: focus lit editor once it is ready

* test: revert unnecessary awaits

* test: revery unnecessary test assertion changes

* Revert "test: update material visual test reference image"

This reverts commit f180f2b.

* test: skip new test on firefox

* test: revert test skip change

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

Co-authored-by: Sergey Vinogradov <mr.vursen@gmail.com>

---------

Co-authored-by: Sergey Vinogradov <mr.vursen@gmail.com>

Author: ugur-vaadin

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');
+    });
   });
 });