fix(modal): closing is prevented with legacy event (#687)

telekom · Nov 9, 2021 · e712c3a · e712c3a
1 parent 15288ee
commit e712c3a
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/packages/components/src/components/modal/modal.tsx b/packages/components/src/components/modal/modal.tsx
@@ -55,7 +55,7 @@ export class Modal {
   /** (optional) Modal size */
   @Prop() size?: string = 'default';
   /** (optional) If `true`, the Modal is open. */
-  @Prop({ reflect: true }) opened?: boolean = false;
+  @Prop({ reflect: true, mutable: true }) opened?: boolean = false;
   /** (optional) Transition duration */
   @Prop() duration?: number = 200;
   /** (optional) Label for close button */
@@ -129,7 +129,9 @@ export class Modal {
   }
 
   emitBeforeClose(trigger: CloseEventTrigger) {
-    if (!this.scaleBeforeClose.emit({ trigger }).defaultPrevented) {
+    const emittedEvents = emitEvent(this, 'scaleBeforeClose', { trigger });
+    const prevented = emittedEvents.some((event) => event.defaultPrevented);
+    if (!prevented) {
       this.opened = false;
     }
   }

diff --git a/packages/components/src/html/modal.html b/packages/components/src/html/modal.html
@@ -41,6 +41,10 @@ <h3>Modal with header</h3>
       modal.addEventListener('scaleClose', () => {
         modal.removeAttribute('opened');
       });
+
+      modal.addEventListener('scaleBeforeClose', (event) => {
+        // event.preventDefault()
+      });
     </script>
   </body>
 </html>
diff --git a/packages/components/src/utils/utils.ts b/packages/components/src/utils/utils.ts
@@ -55,17 +55,23 @@ export const isPseudoClassSupported = (pseudoClass) => {
  * @param instance {ComponentInterface} - The component instance, aka `this`
  * @param eventKey {string} - The event property, e.g. `scaleChange`
  * @param detail {any} - The custom event `detail`
+ * @returns {CustomEvent[]} - The events emitted
  */
 export function emitEvent(
   instance: ComponentInterface,
   eventKey: string,
   detail?: any
-) {
+): CustomEvent[] {
   const legacyKey = eventKey + 'Legacy';
+  const emitted = [];
   if (typeof instance[legacyKey] !== 'undefined') {
-    instance[legacyKey].emit(detail);
+    // Emit legacy camel case event, e.g. `scaleClose`
+    emitted.push(instance[legacyKey].emit(detail));
   }
-  instance[eventKey].emit(detail);
+  // Emit now-standard kebab-case event, e.g. `scale-close`
+  emitted.push(instance[eventKey].emit(detail));
+  // Return both
+  return emitted;
 }
 
 export function isClickOutside(event: MouseEvent, host: HTMLElement) {