From 0cea2be537691ac43ab77fe21bc4b68effcdccae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Sj=C3=B6strand?=
 <99665802+DanielS-Qlik@users.noreply.github.com>
Date: Mon, 24 Apr 2023 14:08:21 +0200
Subject: [PATCH] fix: add box-shadow to scrollbar when focus (#1234)

---
 apis/nucleus/src/components/listbox/ListBoxInline.jsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apis/nucleus/src/components/listbox/ListBoxInline.jsx b/apis/nucleus/src/components/listbox/ListBoxInline.jsx
index b02ab083a..6da6e8a1d 100644
--- a/apis/nucleus/src/components/listbox/ListBoxInline.jsx
+++ b/apis/nucleus/src/components/listbox/ListBoxInline.jsx
@@ -31,8 +31,8 @@ const classes = {
   listboxWrapper: `${PREFIX}-listboxWrapper`,
 };
 
-const StyledGrid = styled(Grid, { shouldForwardProp: (p) => !['containerPadding'].includes(p) })(
-  ({ theme, containerPadding }) => ({
+const StyledGrid = styled(Grid, { shouldForwardProp: (p) => !['containerPadding', 'isGridMode'].includes(p) })(
+  ({ theme, containerPadding, isGridMode }) => ({
     backgroundColor: theme.listBox?.backgroundColor ?? theme.palette.background.default,
     [`& .${classes.listBoxHeader}`]: {
       alignSelf: 'center',
@@ -50,6 +50,9 @@ const StyledGrid = styled(Grid, { shouldForwardProp: (p) => !['containerPadding'
     '&:focus': {
       boxShadow: `inset 0 0 0 2px ${theme.palette.custom.focusBorder} !important`,
     },
+    '&:focus ::-webkit-scrollbar-track': {
+      boxShadow: !isGridMode ? 'inset -2px -2px 0px #3F8AB3' : undefined,
+    },
     '&:focus-visible': {
       outline: 'none',
     },
@@ -326,6 +329,7 @@ function ListBoxInline({ options, layout }) {
           containerRef.current = el;
           containerRectRef(el);
         }}
+        isGridMode={isGridMode}
       >
         {showToolbarWithTitle && (
           <Grid