Merge pull request #3333 from Vizzuality/fix/interaction-fixes-for-selector

Fix/interaction fixes for selector

Author: edbrett

app/javascript/components/dropdown/components/item.jsx

@@ -37,14 +37,15 @@ const Item = props => {
       className={`item-wrapper
         ${isActive ? 'show' : ''}
         ${!group ? 'base' : ''}
+        ${isGroupParentActive ? 'selected' : ''}
+        ${groupParent ? 'group-parent' : ''}
       `}
     >
       {isGroupParentActive && (
         <Icon
           icon={arrowDownIcon}
-          className={`group-icon ${
-            showGroup === groupParent ? 'selected' : ''
-          }`}
+          className="group-icon selected"
+          onClick={() => handleSelectGroup(item)}
         />
       )}
       <div

app/javascript/components/dropdown/dropdown-styles.scss

@@ -175,15 +175,33 @@ $dd-font-size: rem(13px);
       max-height: rem(16px);
     }
 
+    .group-parent {
+      .item {
+        padding-right: rem(25px);
+        z-index: 2;
+      }
+
+      &.selected {
+        .item {
+          padding-right: rem(10px);
+          padding-left: rem(30px);
+        }
+      }
+
+      .group-icon {
+        z-index: 1;
+      }
+    }
+
     .group-icon {
-      margin-right: rem(10px);
       transform: rotate(-90deg);
       fill: $slate;
+      position: absolute;
+      right: rem(10px);
 
       &.selected {
         transform: rotate(90deg);
-        margin-right: 0;
-        margin-left: rem(10px);
+        left: rem(10px);
       }
     }
 

app/javascript/components/dropdown/dropdown.js

@@ -105,7 +105,7 @@ class DropdownContainer extends PureComponent {
 
   handleClearSelection = clearSelection => {
     clearSelection();
-    this.setState({ isOpen: false });
+    this.setState({ isOpen: false, showGroup: '' });
   };
 
   handleSelectGroup = item => {