removing focus ring on click

Shopify · Mar 4, 2021 · a3ed8f1 · a3ed8f1
1 parent 96cd8e2
commit a3ed8f1
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/components/ActionList/components/Item/Item.tsx b/src/components/ActionList/components/Item/Item.tsx
@@ -8,6 +8,7 @@ import {UnstyledLink} from '../../../UnstyledLink';
 import {Badge} from '../../../Badge';
 import {TextStyle} from '../../../TextStyle';
 import styles from '../../ActionList.scss';
+import {handleMouseUpByBlurring} from '../../../../utilities/focus';
 
 export type ItemProps = ActionListItemDescriptor;
 
@@ -81,12 +82,12 @@ export function Item({
   const textMarkup = <div className={styles.Text}>{contentMarkup}</div>;
 
   const contentElement = (
-    <div className={styles.Content}>
+    <span className={styles.Content}>
       {prefixMarkup}
       {textMarkup}
       {badgeMarkup}
       {suffixMarkup}
-    </div>
+    </span>
   );
 
   const scrollMarkup = active ? <Scrollable.ScrollTo /> : null;
@@ -110,6 +111,7 @@ export function Item({
       disabled={disabled}
       aria-label={accessibilityLabel}
       onClick={onAction}
+      onMouseUp={handleMouseUpByBlurring}
     >
       {contentElement}
     </button>

diff --git a/src/components/Popover/Popover.scss b/src/components/Popover/Popover.scss
@@ -17,6 +17,7 @@ $content-max-width: rem(400px);
   will-change: opacity;
   opacity: 0;
   transition: opacity duration() easing(in);
+  transform: translate3d(0, 0, 0);
 }
 
 .PopoverOverlay-entering {