don't use pseudo-element for dropdown caret

Recidiviz · Apr 21, 2021 · ba3190e · ba3190e
1 parent 45fd78d
commit ba3190e
Showing 1 changed file with 10 additions and 9 deletions.
diff --git a/spotlight-client/src/UiLibrary/Dropdown/DropdownBase.tsx b/spotlight-client/src/UiLibrary/Dropdown/DropdownBase.tsx
@@ -56,16 +56,16 @@ const DropdownButton = styled(animated.button)<{
   &:focus {
     outline: none;
   }
+`;
 
-  &::after {
-    border-left: ${rem(4)} solid transparent;
-    border-right: ${rem(4)} solid transparent;
-    border-top: ${rem(4)} solid currentColor;
-    content: "";
-    height: 0;
-    margin-left: ${rem(16)};
-    width: 0;
-  }
+const DropdownButtonCaret = styled.span`
+  border-left: ${rem(4)} solid transparent;
+  border-right: ${rem(4)} solid transparent;
+  border-top: ${rem(4)} solid currentColor;
+  content: "";
+  height: 0;
+  margin-left: ${rem(16)};
+  width: 0;
 `;
 
 const DropdownBase: React.FC<
@@ -155,6 +155,7 @@ const DropdownBase: React.FC<
         onBlur={() => setButtonHover(false)}
       >
         {buttonContents || <span aria-hidden>{label}</span>}
+        <DropdownButtonCaret />
       </DropdownButton>
       {useFixedMenu ? (
         <FixedMenu {...menuProps} />