From 0a2f7e5a618ec44a310934686f6186fea4762cf1 Mon Sep 17 00:00:00 2001
From: David Leek <david@getunleash.io>
Date: Tue, 2 Jul 2024 13:15:57 +0200
Subject: [PATCH] chore: fix searchbar styling when focus is on results (#7517)

---
 .../src/component/commandBar/CommandBar.tsx   | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/frontend/src/component/commandBar/CommandBar.tsx b/frontend/src/component/commandBar/CommandBar.tsx
index 0cc90f224b..34170b95a1 100644
--- a/frontend/src/component/commandBar/CommandBar.tsx
+++ b/frontend/src/component/commandBar/CommandBar.tsx
@@ -72,11 +72,6 @@ const StyledSearch = styled('div')(({ theme }) => ({
     padding: '3px 5px 3px 12px',
     width: '100%',
     zIndex: 3,
-    '&:focus-within': {
-        borderBottomLeftRadius: 0,
-        borderBottomRightRadius: 0,
-        borderBottom: '0px',
-    },
 }));
 
 const StyledInputBase = styled(InputBase)(({ theme }) => ({
@@ -214,7 +209,22 @@ export const CommandBar = () => {
     return (
         <StyledContainer ref={searchContainerRef} active={showSuggestions}>
             <RecentlyVisitedRecorder />
-            <StyledSearch>
+            <StyledSearch
+                sx={{
+                    borderBottomLeftRadius: (theme) =>
+                        showSuggestions
+                            ? 0
+                            : theme.shape.borderRadiusExtraLarge,
+                    borderBottomRightRadius: (theme) =>
+                        showSuggestions
+                            ? 0
+                            : theme.shape.borderRadiusExtraLarge,
+                    borderBottom: (theme) =>
+                        showSuggestions
+                            ? '0px'
+                            : `1px solid ${theme.palette.neutral.border}`,
+                }}
+            >
                 <SearchIcon
                     sx={{
                         mr: 1,