fix(overlays): keep hide/show hooks

ing-bank · Dec 2, 2020 · 2eeace2 · 2eeace2
1 parent 0f41bf2
commit 2eeace2
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 6 deletions.
diff --git a/.changeset/tricky-mugs-switch.md b/.changeset/tricky-mugs-switch.md
@@ -0,0 +1,5 @@
+---
+'@lion/overlays': patch
+---
+
+Keep transitionShow and transitionHide as user hooks
diff --git a/packages/combobox/test/lion-combobox.test.js b/packages/combobox/test/lion-combobox.test.js
@@ -302,8 +302,8 @@ describe('lion-combobox', () => {
       expect(document.activeElement).to.equal(el._inputNode);
 
       // step [4]
-      el._inputNode.value = '';
-      el._inputNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'c' }));
+      await el.updateComplete;
+      mimicUserTyping(el, 'c');
       await el.updateComplete;
       expect(el.opened).to.equal(true);
     });

diff --git a/packages/input-datepicker/test-helpers/DatepickerInputObject.js b/packages/input-datepicker/test-helpers/DatepickerInputObject.js
@@ -26,6 +26,7 @@ export class DatepickerInputObject {
 
   async closeCalendar() {
     this.overlayCloseButtonEl.click();
+    await this.overlayEl.updateComplete;
   }
 
   /**

diff --git a/packages/overlays/src/OverlayController.js b/packages/overlays/src/OverlayController.js
@@ -681,7 +681,10 @@ export class OverlayController extends EventTargetShim {
       await this._handlePosition({ phase: 'show' });
       this.__elementToFocusAfterHide = elementToFocusAfterHide;
       this.dispatchEvent(new Event('show'));
-      await this.transitionShow({ backdropNode: this.backdropNode, contentNode: this.contentNode });
+      await this._transitionShow({
+        backdropNode: this.backdropNode,
+        contentNode: this.contentNode,
+      });
     }
     /** @type {function} */
     (this._showResolve)();
@@ -787,7 +790,11 @@ export class OverlayController extends EventTargetShim {
     const event = new CustomEvent('before-hide', { cancelable: true });
     this.dispatchEvent(event);
     if (!event.defaultPrevented) {
-      await this.transitionHide({ backdropNode: this.backdropNode, contentNode: this.contentNode });
+      await this._transitionHide({
+        backdropNode: this.backdropNode,
+        contentNode: this.contentNode,
+      });
+
       this.contentWrapperNode.style.display = 'none';
       this._handleFeatures({ phase: 'hide' });
       this._keepBodySize({ phase: 'hide' });
@@ -797,11 +804,22 @@ export class OverlayController extends EventTargetShim {
     /** @type {function} */ (this._hideResolve)();
   }
 
+  /**
+   * Method to be overriden by subclassers
+   *
+   * @param {{backdropNode:HTMLElement, contentNode:HTMLElement}} hideConfig
+   */
+  // eslint-disable-next-line class-methods-use-this, no-empty-function, no-unused-vars
+  async transitionHide(hideConfig) {}
+
   /**
    * @param {{backdropNode:HTMLElement, contentNode:HTMLElement}} hideConfig
    */
   // eslint-disable-next-line class-methods-use-this, no-empty-function, no-unused-vars
-  async transitionHide(hideConfig) {
+  async _transitionHide(hideConfig) {
+    // `this.transitionHide` is a hook for our users
+    await this.transitionHide({ backdropNode: this.backdropNode, contentNode: this.contentNode });
+
     if (hideConfig.backdropNode) {
       hideConfig.backdropNode.classList.remove(
         `${this.placementMode}-overlays__backdrop--animation-in`,
@@ -830,11 +848,22 @@ export class OverlayController extends EventTargetShim {
     }
   }
 
+  /**
+   * To be overridden by subclassers
+   *
+   * @param {{backdropNode:HTMLElement, contentNode:HTMLElement}} showConfig
+   */
+  // eslint-disable-next-line class-methods-use-this, no-empty-function, no-unused-vars
+  async transitionShow(showConfig) {}
+
   /**
    * @param {{backdropNode:HTMLElement, contentNode:HTMLElement}} showConfig
    */
   // eslint-disable-next-line class-methods-use-this, no-empty-function, no-unused-vars
-  async transitionShow(showConfig) {
+  async _transitionShow(showConfig) {
+    // `this.transitionShow` is a hook for our users
+    await this.transitionShow({ backdropNode: this.backdropNode, contentNode: this.contentNode });
+
     if (showConfig.backdropNode) {
       showConfig.backdropNode.classList.add(
         `${this.placementMode}-overlays__backdrop--animation-in`,