fix: focus editor only after it is ready #7235

ugur-vaadin · 2024-03-18T23:09:25Z

Description

The editor for Lit is initialized asynchronously, unlike Polymer. Therefore, during the first focus call, the editor focus element is not ready yet.

This PR

separates the Lit and Polymer focus behaviour
focuses the Lit editor only when it is ready
focuses the Polymer editor immediately
removes the extra deferred focus call

Fixes #6117

Type of change

Bugfix
Feature

Checklist

I have read the contribution guide: https://vaadin.com/docs/latest/contributing/overview
I have added a description following the guideline.
The issue is created in the corresponding repository and I have referenced it.
I have added tests to ensure my change is effective and works as intended.
New and existing tests are passing locally with my change.
I have performed self-review and corrected misspellings.

ugur-vaadin · 2024-03-18T23:38:53Z

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

@@ -362,5 +364,15 @@ describe('edit column editor type', () => {
      editor = column._getEditorComponent(cell);
      expect(editor).to.be.not.ok;
    });
+


New test fails here with Firefox, works locally.

I have tried the fix manually for both Lit and Polymer, using all supported browsers on MacOS, Windows, and Android. The issue does not seem to be re reproducible in any of them.

ugur-vaadin · 2024-03-18T23:39:15Z

packages/grid-pro/test/keyboard-navigation.common.js

@@ -113,7 +113,8 @@ describe('keyboard navigation', () => {
      expect(getCellEditor(firstCell)).to.be.not.ok;
    });

-    it('should focus correct editable cell after column reordering', () => {
+    // See https://github.com/vaadin/web-components/issues/7229
+    it.skip('should focus correct editable cell after column reordering', () => {


Fails without any change.

ugur-vaadin · 2024-03-18T23:39:41Z

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

      dblclick(cell._content);
+      await nextFrame();


Necessary because of the timing changes.

ugur-vaadin · 2024-03-18T23:40:51Z

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

@@ -180,10 +180,11 @@ describe('edit column renderer', () => {
      };

      dblclick(cell._content);
-      expect(spy.calledOnce).to.be.true;
+      await nextFrame();


Necessary because of the timing changes. Also, the test fails with the existing code when this is added. Focus is always triggered twice.

ugur-vaadin · 2024-03-18T23:41:07Z

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

@@ -194,7 +195,8 @@ describe('edit column renderer', () => {
      };

      dblclick(cell._content);
-      expect(spy.calledOnce).to.be.true;
+      await nextFrame();


Same as above.

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

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

vursen · 2024-03-26T09:07:29Z

When running tests locally, I get the following failures:

packages/grid-pro/test/keyboard-navigation-polymer.test.js:

 ❌ keyboard navigation > when `singleCellEdit` is true > should focus correct editable cell after column reordering
      AssertionError: expected false to be true
      + expected - actual

      -false
      +true

      at n.<anonymous> (packages/grid-pro/test/keyboard-navigation.common.js:131:35)

packages/grid-pro/test/keyboard-navigation-lit.test.js:

 ❌ keyboard navigation > when `singleCellEdit` is true > should focus correct editable cell after column reordering
      AssertionError: expected false to be true
      + expected - actual

      -false
      +true

      at n.<anonymous> (packages/grid-pro/test/keyboard-navigation.common.js:131:35)

ugur-vaadin · 2024-03-26T09:40:36Z

When running tests locally, I get the following failures:

packages/grid-pro/test/keyboard-navigation-polymer.test.js:

 ❌ keyboard navigation > when `singleCellEdit` is true > should focus correct editable cell after column reordering
      AssertionError: expected false to be true
      + expected - actual

      -false
      +true

      at n.<anonymous> (packages/grid-pro/test/keyboard-navigation.common.js:131:35)

packages/grid-pro/test/keyboard-navigation-lit.test.js:

 ❌ keyboard navigation > when `singleCellEdit` is true > should focus correct editable cell after column reordering
      AssertionError: expected false to be true
      + expected - actual

      -false
      +true

      at n.<anonymous> (packages/grid-pro/test/keyboard-navigation.common.js:131:35)

Those tests also fail without these changes. They are temporarily disabled in main, and will be restored after the reordering fix is merged.

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

vursen · 2024-03-26T09:58:05Z

I wonder if the PR should be marked with ! considering that it changes the timing of the focus event for the Polymer version – it's no longer synchronous.

sissbruecker · 2024-03-26T11:30:54Z

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

+      const editInitiatorKey = this._editInitiatorKey;
+      this._editInitiatorKey = undefined;
+      requestAnimationFrame(() => {
+        if (editInitiatorKey) {


Previously it was possible to paste text into a cell, for example with Command + V. When I try this now I only get a v in the cell editor.

It's just an idea but we could consider redirecting user input to a temporary input element until the editor has finished rendering.

This approach was abandoned. Currently, the Polymer editor is focused synchronously and the Lit editor is focused when it is ready.

This reverts commit 3a62f57.

This reverts commit d5939d1.

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

This reverts commit f180f2b.

ugur-vaadin · 2024-03-28T07:38:19Z

I wonder if the PR should be marked with ! considering that it changes the timing of the focus event for the Polymer version – it's no longer synchronous.

I removed the breaking change signs since the Polymer focus is still synchronous after the latest updates to the fix.

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

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

sonarcloud · 2024-03-28T11:01:00Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

* 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>

vaadin-bot · 2024-04-04T08:22:03Z

This ticket/PR has been released with Vaadin 24.4.0.alpha20 and is also targeting the upcoming stable 24.4.0 version.

ugur-vaadin commented Mar 18, 2024

View reviewed changes

vursen reviewed Mar 22, 2024

View reviewed changes

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

ugur-vaadin changed the title ~~fix: defer focus in order to have editor ready before~~ fix: explicitly set initial char on edit start instead of relying on keydown timing Mar 22, 2024

ugur-vaadin marked this pull request as ready for review March 22, 2024 08:37

vursen reviewed Mar 26, 2024

View reviewed changes

packages/grid-pro/src/vaadin-grid-pro-edit-column-mixin.js Outdated Show resolved Hide resolved

vursen reviewed Mar 26, 2024

View reviewed changes

packages/grid-pro/src/vaadin-grid-pro-edit-column-mixin.js Outdated Show resolved Hide resolved

ugur-vaadin changed the title ~~fix: explicitly set initial char on edit start instead of relying on keydown timing~~ fix!: explicitly set initial char on edit start instead of relying on keydown timing Mar 26, 2024

sissbruecker reviewed Mar 26, 2024

View reviewed changes

ugur-vaadin and others added 13 commits March 27, 2024 14:21

fix: defer focus in order to have editor ready before

3abaf85

test: fix unit test for firefox

cfb7887

test: await next render before assertion

b128cc2

test: add another await next render after the first keydown

fe49083

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

727a168

This reverts commit 3a62f57.

Revert "test: await next render before assertion"

83081e5

This reverts commit d5939d1.

test: update material visual test reference image

f180f2b

fix: set edit initiator char explicitly

7a7ba81

test: revert skip test

80b35d7

fix: do not select input when initialized with character

0df8bde

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

1c27e3b

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

refactor: extract input selection logic from editor focus

558ae39

refactor: change name of the new property

774cb53

ugur-vaadin force-pushed the fix-defer-focus-to-have-editor-ready-before branch from 1280cc1 to 774cb53 Compare March 27, 2024 20:13

refactor: focus lit editor once it is ready

750fe4e

ugur-vaadin added 5 commits March 27, 2024 22:22

test: revert unnecessary awaits

bde29e2

test: revery unnecessary test assertion changes

d82353d

Revert "test: update material visual test reference image"

44c453a

This reverts commit f180f2b.

test: skip new test on firefox

c3136e9

test: revert test skip change

74277ad

ugur-vaadin changed the title ~~fix!: explicitly set initial char on edit start instead of relying on keydown timing~~ fix!: focus editor only after it is ready Mar 27, 2024

ugur-vaadin changed the title ~~fix!: focus editor only after it is ready~~ fix: focus editor only after it is ready Mar 27, 2024

ugur-vaadin added the target/24.3 label Mar 27, 2024

ugur-vaadin changed the title ~~fix: focus editor only after it is ready~~ fix: focus lit editor only after it is ready Mar 27, 2024

ugur-vaadin changed the title ~~fix: focus lit editor only after it is ready~~ fix: focus editor only after it is ready Mar 27, 2024

vursen reviewed Mar 28, 2024

View reviewed changes

packages/grid-pro/test/edit-column-type.common.js Outdated Show resolved Hide resolved

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

8ea9a52

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

vursen approved these changes Mar 28, 2024

View reviewed changes

ugur-vaadin merged commit 212637f into main Mar 28, 2024
9 checks passed

ugur-vaadin deleted the fix-defer-focus-to-have-editor-ready-before branch March 28, 2024 16:59

vaadin-bot added the cherry-picked-24.3 label Mar 28, 2024

web-padawan pushed a commit that referenced this pull request Mar 29, 2024

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

60f1c0e

vaadin-bot added prerelease version for Vaadin 24.4.0 Released with Vaadin 24.4.0.alpha20 labels Apr 4, 2024

This was referenced Jun 6, 2024

[Snyk] Upgrade @vaadin/combo-box from 23.5.1 to 24.3.13 OKEAMAH/skia-buildbot#15

Open

[Snyk] Upgrade @vaadin/combo-box from 23.5.1 to 24.3.13 OKEAMAH/skia-buildbot#20

Open

[Snyk] Upgrade @vaadin/combo-box from 23.5.1 to 24.3.13 OKEAMAH/skia-buildbot#23

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: focus editor only after it is ready #7235

fix: focus editor only after it is ready #7235

ugur-vaadin commented Mar 18, 2024 •

edited

Loading

ugur-vaadin Mar 18, 2024

ugur-vaadin Mar 27, 2024

ugur-vaadin Mar 18, 2024

ugur-vaadin Mar 18, 2024

ugur-vaadin Mar 18, 2024

ugur-vaadin Mar 18, 2024

vursen commented Mar 26, 2024

ugur-vaadin commented Mar 26, 2024

vursen commented Mar 26, 2024

sissbruecker Mar 26, 2024

vursen Mar 26, 2024 •

edited

Loading

ugur-vaadin Mar 28, 2024

ugur-vaadin commented Mar 28, 2024

sonarcloud bot commented Mar 28, 2024

vaadin-bot commented Apr 4, 2024

fix: focus editor only after it is ready #7235

fix: focus editor only after it is ready #7235

Conversation

ugur-vaadin commented Mar 18, 2024 • edited Loading

Description

Type of change

Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vursen commented Mar 26, 2024

ugur-vaadin commented Mar 26, 2024

vursen commented Mar 26, 2024

Choose a reason for hiding this comment

vursen Mar 26, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ugur-vaadin commented Mar 28, 2024

sonarcloud bot commented Mar 28, 2024

Quality Gate passed

vaadin-bot commented Apr 4, 2024

ugur-vaadin commented Mar 18, 2024 •

edited

Loading

vursen Mar 26, 2024 •

edited

Loading