From efc8fdfb7b1c8e9fc8872a8b7c9d520196c2fa9d Mon Sep 17 00:00:00 2001
From: roastedcpu <66945385+roastedcpu@users.noreply.github.com>
Date: Thu, 28 Oct 2021 10:14:09 +0100
Subject: [PATCH] Cherrypick cell focus event (#2196)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Sascha Ißbrücker <sascha.issbruecker@googlemail.com>
---
 ...vaadin-grid-keyboard-navigation-mixin.html | 14 +++++++++
 test/keyboard-navigation.html                 | 29 +++++++++++++++++++
 2 files changed, 43 insertions(+)

diff --git a/src/vaadin-grid-keyboard-navigation-mixin.html b/src/vaadin-grid-keyboard-navigation-mixin.html
index 2f86b3912..158cd4bb5 100644
--- a/src/vaadin-grid-keyboard-navigation-mixin.html
+++ b/src/vaadin-grid-keyboard-navigation-mixin.html
@@ -537,6 +537,12 @@
         }
         // Inform cell content of the focus (used in <vaadin-grid-sorter>)
         cell._content.dispatchEvent(new CustomEvent('cell-focusin', {bubbles: false}));
+
+        // Fire a public event for cell focus.
+        const context = this.getEventContext(e);
+        cell.dispatchEvent(
+          new CustomEvent('cell-focus', {bubbles: true, composed: true, detail: {context: context}})
+        );
       }
 
       this._detectFocusedItemIndex(e);
@@ -743,5 +749,13 @@
       }
       return null;
     }
+
+    /**
+     * Fired when a cell is focused with click or keyboard navigation.
+     *
+     * Use context property of @see {@link GridCellFocusEvent} to get detail information about the event.
+     *
+     * @event cell-focus
+     */
   };
 </script>
diff --git a/test/keyboard-navigation.html b/test/keyboard-navigation.html
index 34a17fcd5..4865f8a88 100644
--- a/test/keyboard-navigation.html
+++ b/test/keyboard-navigation.html
@@ -1912,6 +1912,35 @@
 
           expect(spy.callCount).to.equal(1);
         });
+
+        it('should dispatch cell-focus on keyboard navigation', (done) => {
+          const expectedContext = {
+            column: grid.querySelector('vaadin-grid-column'),
+            detailsOpened: false,
+            expanded: false,
+            index: 0,
+            item: 'foo',
+            level: 0,
+            section: 'body',
+            selected: false
+          };
+
+          tabToBody();
+          right();
+
+          const spy = sinon.spy();
+
+          grid.addEventListener('cell-focus', (e) => {
+            spy();
+            const context = e.target.getEventContext(e);
+            expect(context).to.deep.equal(expectedContext);
+            done();
+          });
+
+          left();
+
+          expect(spy.calledOnce).to.be.true;
+        });
       });
     });