Add latest changes from gitlab-org/gitlab@master

1 files changed, 10 insertions, 1 deletions

diff --git a/app/assets/javascripts/abuse_reports/components/abuse_category_selector.vue b/app/assets/javascripts/abuse_reports/components/abuse_category_selector.vue
index 85a43aa41e5..4a7c12e5e51 100644
--- a/app/assets/javascripts/abuse_reports/components/abuse_category_selector.vue
+++ b/app/assets/javascripts/abuse_reports/components/abuse_category_selector.vue
@@ -56,13 +56,22 @@ export default {
   data() {
     return {
       selected: '',
+      mounted: false,
     };
   },
   computed: {
     drawerOffsetTop() {
+      // avoid calculating this in advance because it causes layout thrashing
+      // https://gitlab.com/gitlab-org/gitlab/-/issues/331172#note_1269378396
+      if (!this.showDrawer) return '0';
       return getContentWrapperHeight('.content-wrapper');
     },
   },
+  mounted() {
+    // this is required for the component to properly animate
+    // when it is shown with v-if
+    this.mounted = true;
+  },
   methods: {
     closeDrawer() {
       this.$emit('close-drawer');
@@ -74,7 +83,7 @@ export default {
   <gl-drawer
     :header-height="drawerOffsetTop"
     :z-index="300"
-    :open="showDrawer"
+    :open="showDrawer && mounted"
     @close="closeDrawer"
   >
     <template #title>