fix: Fixes Modal using animation frame

ui/src/components/ClickAwayContainer.ts

@@ -58,25 +58,28 @@ export default Vue.extend({
     active: {
       immediate: true,
       handler(isActive: boolean, wasActive: boolean): void {
-        const { documentElement } = document;
-        // We are listening for clicks on the documentElement. Listening for clicks
-        // on the body elements also works but less reliably. For example if the height
-        // the body element is < 100% there will be places on the page which will
-        // emit nothing when clicked.
-        if (documentElement == null) {
-          warn(
-            `v-${this}: Cannot do anything without a documentElement element.`
-          );
-          return;
-        }
-        if (isActive && !wasActive) {
-          this.$el.addEventListener("click", this.click, false);
-          documentElement.addEventListener("click", this.click, false);
-        }
-        if (!isActive && wasActive) {
-          this.$el.removeEventListener("click", this.click, false);
-          documentElement.removeEventListener("click", this.click, false);
-        }
+        const raf = requestAnimationFrame || (cb => setTimeout(cb, 16));
+        raf(() => {
+          const { documentElement } = document;
+          // We are listening for clicks on the documentElement. Listening for clicks
+          // on the body elements also works but less reliably. For example if the height
+          // the body element is < 100% there will be places on the page which will
+          // emit nothing when clicked.
+          if (documentElement == null) {
+            warn(
+              `v-${this}: Cannot do anything without a documentElement element.`
+            );
+            return;
+          }
+          if (isActive && !wasActive) {
+            this.$el.addEventListener("click", this.click, false);
+            documentElement.addEventListener("click", this.click, false);
+          }
+          if (!isActive && wasActive) {
+            this.$el.removeEventListener("click", this.click, false);
+            documentElement.removeEventListener("click", this.click, false);
+          }
+        });
       }
     }
   }

ui/src/components/Modal/Modal.vue

@@ -1,53 +1,48 @@
 <template>
-  <transition name="fade">
-    <div
-      v-show="isActive"
-      class="fd-ui__overlay fd-overlay fd-overlay--modal"
-      :aria-hidden="!isActive"
+  <div
+    v-show="isActive"
+    class="fd-ui__overlay fd-overlay fd-overlay--modal"
+    :aria-hidden="!isActive"
+  >
+    <ClickAwayContainer
+      @clickOutside="clickOutside"
+      class="fd-modal"
+      :active="isActive"
     >
-      <ClickAwayContainer
-        @clickOutside="clickOutside"
-        class="fd-modal"
-        :active="isActive"
-      >
-        <div class="fd-modal__content" role="document">
-          <!-- HEADER -->
-          <div class="fd-modal__header">
-            <h1 class="fd-modal__title">{{ title }}</h1>
-            <Button
-              class="fd-modal__close"
-              styling="light"
-              @click="close"
-              aria-label="close"
-            />
-          </div>
-
-          <!-- BODY -->
-          <div class="fd-modal__body">
-            <slot />
-          </div>
+      <div class="fd-modal__content" role="document">
+        <!-- HEADER -->
+        <div class="fd-modal__header">
+          <h1 class="fd-modal__title">{{ title }}</h1>
+          <Button
+            class="fd-modal__close"
+            styling="light"
+            @click="close"
+            aria-label="close"
+          />
+        </div>
 
-          <!-- FOOTER -->
-          <footer
-            v-if="$slots.footer != null || $slots.actions != null"
-            class="fd-modal__footer"
-          >
-            <slot name="footer" />
-            <div v-if="$slots.actions" class="fd-modal__actions">
-              <slot name="actions" />
-            </div>
-          </footer>
+        <!-- BODY -->
+        <div class="fd-modal__body">
+          <slot />
         </div>
-      </ClickAwayContainer>
-    </div>
-  </transition>
+
+        <!-- FOOTER -->
+        <footer
+          v-if="$slots.footer != null || $slots.actions != null"
+          class="fd-modal__footer"
+        >
+          <slot name="footer" />
+          <div v-if="$slots.actions" class="fd-modal__actions">
+            <slot name="actions" />
+          </div>
+        </footer>
+      </div>
+    </ClickAwayContainer>
+  </div>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
-// Use these types in order to cast your props. Delete if not needed.
-// import { PropValidator } from "vue/types/options";
-// import { Prop } from "vue/types/options";
 import ClickAwayContainer from "@/components/ClickAwayContainer";
 import { Button } from "@/components/Button";
 

ui/src/components/Modal/__tests__/__snapshots__/Modal.test.ts.snap

@@ -4,7 +4,6 @@ exports[`Modal renders correctly 1`] = `
 <div
   aria-hidden="true"
   class="fd-ui__overlay fd-overlay fd-overlay--modal"
-  name="fade"
   style="display: none;"
 >
   <div

ui/src/util/pluginify.ts

@@ -1,5 +1,5 @@
 import { PluginFunction, PluginObject } from "vue/types/plugin";
-import { VueConstructor } from "vue/types/vue";
+import { VueConstructor } from "vue";
 import { ComponentOptions } from "vue/types/options";
 import { log } from "@/core";
 import { PluginOptions, normalizedPluginOptions } from "./PluginOptions";