fix(ListBoxMenuItem): ensure border-subtle renders correct value

carbon-design-system · May 25, 2023 · 139979b · 139979b
1 parent b8701c9
commit 139979b
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/packages/react/src/components/ListBox/ListBoxMenuItem.tsx b/packages/react/src/components/ListBox/ListBoxMenuItem.tsx
@@ -10,6 +10,7 @@ import React, { ForwardedRef, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { usePrefix } from '../../internal/usePrefix';
 import { ForwardRefReturn, ReactAttr } from '../../types/common';
+import { Layer } from '../Layer';
 
 function useIsTruncated(ref) {
   const [isTruncated, setIsTruncated] = useState(false);
@@ -37,6 +38,7 @@ export interface ListBoxMenuItemProps extends ReactAttr<HTMLDivElement> {
 export type ListBoxMenuItemForwardedRef =
   | (ForwardedRef<HTMLDivElement> & {
       menuItemOptionRef?: React.Ref<HTMLDivElement>;
+      Layer: HTMLDivElement;
     })
   | null;
 
@@ -69,11 +71,13 @@ const ListBoxMenuItem = React.forwardRef<HTMLDivElement, ListBoxMenuItemProps>(
         className={className}
         title={isTruncated ? title : undefined}
         tabIndex={-1}>
-        <div
-          className={`${prefix}--list-box__menu-item__option`}
-          ref={forwardedRef?.menuItemOptionRef || ref}>
-          {children}
-        </div>
+        <Layer>
+          <div
+            className={`${prefix}--list-box__menu-item__option`}
+            ref={forwardedRef?.menuItemOptionRef || ref}>
+            {children}
+          </div>
+        </Layer>
       </div>
     );
   }