Fix `Util.reflow` function and add documentation (#34543)

* add documentation to reflow function

* refactor to void as it should be

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/js/src/util/index.js b/js/src/util/index.js
index a1af87aa479e95f00f0c91a700cb63af2c64d4d3..f81d64837ed2d2a60fa71ce2b5ec2d325ed605b5 100644 (file)
--- a/js/src/util/index.js
+++ b/js/src/util/index.js
@@ -188,7 +188,18 @@ const findShadowRoot = element => {
 
 const noop = () => {}
 
-const reflow = element => element.offsetHeight
+/**
+ * Trick to restart an element's animation
+ *
+ * @param {HTMLElement} element
+ * @return void
+ *
+ * @see https://www.charistheo.io/blog/2021/02/restart-a-css-animation-with-javascript/#restarting-a-css-animation
+ */
+const reflow = element => {
+  // eslint-disable-next-line no-unused-expressions
+  element.offsetHeight
+}
 
 const getjQuery = () => {
   const { jQuery } = window

diff --git a/js/tests/unit/util/index.spec.js b/js/tests/unit/util/index.spec.js
index 9b5d7b70e22a27f43ce65a9f82212acf4f61026c..38e94dc6bb940ef64f012ed3bafa1dbccf1d6902 100644 (file)
--- a/js/tests/unit/util/index.spec.js
+++ b/js/tests/unit/util/index.spec.js
@@ -543,8 +543,9 @@ describe('Util', () => {
       fixtureEl.innerHTML = '<div></div>'
 
       const div = fixtureEl.querySelector('div')
-
-      expect(Util.reflow(div)).toEqual(0)
+      const spy = spyOnProperty(div, 'offsetHeight')
+      Util.reflow(div)
+      expect(spy).toHaveBeenCalled()
     })
   })