IBX-7952: Fix simple dropdown's (React) hidden state of items list

ibexa · Apr 3, 2024 · fdf5f5b · fdf5f5b
1 parent ce407a8
commit fdf5f5b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/src/bundle/Resources/public/scss/ui/modules/common/_simple.dropdown.scss b/src/bundle/Resources/public/scss/ui/modules/common/_simple.dropdown.scss
@@ -35,9 +35,12 @@
         border-radius: $ibexa-border-radius;
         box-shadow: calculateRem(4px) calculateRem(32px) calculateRem(47px) 0 rgba($ibexa-color-info, 0.1);
         transition: opacity $ibexa-admin-transition-duration $ibexa-admin-transition;
-        opacity: 0;
-        height: 0;
-        overflow: hidden;
+        transform: scaleX(1);
+
+        &--hidden {
+            transform: scaleX(0);
+            opacity: 0;
+        }
     }
 
     &__list-items {
@@ -114,11 +117,6 @@
         }
     }
 
-    &--expanded .c-simple-dropdown__items {
-        opacity: 1;
-        height: auto;
-    }
-
     &--disabled {
         opacity: 0.3;
         cursor: not-allowed;

diff --git a/src/bundle/ui-dev/src/modules/common/simple-dropdown/simple.dropdown.js b/src/bundle/ui-dev/src/modules/common/simple-dropdown/simple.dropdown.js
@@ -14,6 +14,10 @@ const SimpleDropdown = ({ options, selectedOption, extraClasses, onOptionClick,
         'c-simple-dropdown--switcher': isSwitcher,
         [extraClasses]: true,
     });
+    const dropdownItemsClass = createCssClassNames({
+        'c-simple-dropdown__items': true,
+        'c-simple-dropdown__items--hidden': !isExpanded,
+    });
     const toggleExpanded = () => {
         if (isDisabled) {
             return;
@@ -101,7 +105,7 @@ const SimpleDropdown = ({ options, selectedOption, extraClasses, onOptionClick,
     return (
         <div className={dropdownClass} ref={containerRef}>
             {renderSelectedItem()}
-            <div className="c-simple-dropdown__items">
+            <div className={dropdownItemsClass}>
                 <ul className="c-simple-dropdown__list-items">{options.map(renderItem)}</ul>
             </div>
         </div>