Merge branch '35955-searchable-settings-puts-expand-collapse-toggle-in-an-invalid-state' into 'master'

Resolve "Searchable settings puts expand/collapse toggle in an invalid state."

Closes #35955, #37520, and #39207

See merge request gitlab-org/gitlab-ce!13363

1 files changed, 8 insertions, 5 deletions

diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 41a6ba2023a..968a94c68cf 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -23,15 +23,14 @@
 }
 
 .settings {
-  overflow: hidden;
   border-bottom: 1px solid $gray-darker;
 
   &:first-of-type {
     margin-top: 10px;
   }
 
-  &.expanded {
-    overflow: visible;
+  &.animating {
+    overflow: hidden;
   }
 }
 
@@ -56,14 +55,18 @@
   overflow-y: scroll;
   padding-right: 110px;
   animation: collapseMaxHeight 300ms ease-out;
+  // Keep the section from expanding when we scroll over it
+  pointer-events: none;
 
-  &.expanded {
+  .settings.expanded & {
     max-height: none;
     overflow-y: visible;
     animation: expandMaxHeight 300ms ease-in;
+    // Reset and allow clicks again when expanded
+    pointer-events: auto;
   }
 
-  &.no-animate {
+  .settings.no-animate & {
     animation: none;
   }