🐛 fix: fix dropdown options container z-index on close

Author: e1en0r

src/compositions/Dropdown/DropdownWithTags.tsx

@@ -28,6 +28,8 @@ export type DropdownWithTagsProps = Omit<PartialDropdownProps, 'initialSelected'
   /** A custom renderer for the tags */
   tag?: RenderFromPropElement<DropdownWithTagsOption>;
   tagGroupProps?: Omit<TagGroupProps, 'size'>;
+  /** The margin between the tag group and the dropdown */
+  tagMarginTop?: number;
   tagProps?: Omit<TagProps<'button'>, 'actionable' | 'as' | 'children' | 'onClick' | 'ref'>;
   tagShape?: TagShape;
   tagSize?: TagSize;
@@ -61,6 +63,7 @@ export function DropdownWithTags({
   tagProps,
   tagShape = 'pill',
   tagSize = 'xsmall',
+  tagMarginTop = 6,
   tagWeight = 'outlined',
   themeId: initThemeId,
   translations: customTranslations,
@@ -166,7 +169,7 @@ export function DropdownWithTags({
         themeId={themeId}
         {...props}
       />
-      <Rhythm grouped mt={6}>
+      <Rhythm grouped mt={tagMarginTop}>
         <TagGroup size={tagSize} {...tagGroupProps}>
           {options
             .filter(({ id }) => state.selectedIds.includes(id))

src/compositions/Dropdown/stories/DropdownWithTags.stories.tsx

@@ -84,6 +84,11 @@ export default {
         category: 'Tags',
       },
     },
+    tagMarginTop: {
+      table: {
+        category: 'Tags',
+      },
+    },
     tagGroupProps: {
       table: {
         category: 'Tags',

src/compositions/Dropdown/styles/Dropdown.module.css

@@ -30,6 +30,10 @@
   }
 }
 
+/**
+ * 1. Prevent the dptions container from falling behind
+      the tags (if applicable) while it's closing.
+ */
 .dropdownOptionsContainer {
   left: 0;
   overflow: visible;
@@ -38,6 +42,10 @@
   top: 100%;
   user-select: none;
 
+  &:not(.is-visible) {
+    z-index: 2; /* [1] */
+  }
+
   &.is-visible {
     z-index: $layout-z-index-popover;
 

src/stories/Playground.stories.mdx

@@ -652,7 +652,7 @@ import {
           { id: 4, value: 'four' },
           { id: 5, value: 'five', label: 'Plain text option' },
         ].map(option => ({
-          label: ({ selected }) => (
+          label: ({ focused, selected }) => (
             <Flex flexible alignItems="center" direction="row" justifyContent="flex-start">
               <Avatar
                 imgSrc="/images/avatar.png"
@@ -664,9 +664,11 @@ import {
                   <Typography weight="bold">Phorkish</Typography>
                 </Flex>
               </Rhythm>
-              <Typography color={selected ? 'contrast' : 'accent'} variants="line-height-smash">
-                <CheckIcon scale="medium" />
-              </Typography>
+              {selected && (
+                <Typography color={focused ? 'contrast' : 'accent'} variants="line-height-smash">
+                  <CheckIcon scale="medium" />
+                </Typography>
+              )}
             </Flex>
           ),
           selectedLabel: option.label || (
@@ -730,7 +732,7 @@ import {
           { id: 4, value: 'four' },
           { id: 5, value: 'five', label: 'Plain text option' },
         ].map(option => ({
-          label: ({ selected }) => (
+          label: ({ focused, selected }) => (
             <Flex flexible alignItems="center" direction="row" justifyContent="flex-start">
               <Avatar
                 imgSrc="/images/avatar.png"
@@ -746,9 +748,11 @@ import {
                   </Typography>
                 </Flex>
               </Rhythm>
-              <Typography color={selected ? 'contrast' : 'accent'} variants="line-height-smash">
-                <CheckIcon scale="medium" />
-              </Typography>
+              {selected && (
+                <Typography color={focused ? 'contrast' : 'accent'} variants="line-height-smash">
+                  <CheckIcon scale="medium" />
+                </Typography>
+              )}
             </Flex>
           ),
           selectedLabel: option.label || (