[SecuritySolution] Fix: flyout input focus issue (#137960) (#138481)

Workaround

- As suggested by EUI team, we can do a workaround by giving each Flyout instance a unique key which will force React to unmount and remount the flyout and never directly update it.
- This does impact user experience in minor way (imho), where user will see a new flyout sliding from right side everytime they click on a particular row. Please see below video to see how it looks like.

Co-authored-by: Jan Monschke <janmonschke@fastmail.com>
(cherry picked from commit 05ef19f7da)

Co-authored-by: Jatin Kathuria <jtn.kathuria@gmail.com>

x-pack/plugins/security_solution/public/timelines/components/side_panel/index.tsx

@@ -74,11 +74,13 @@ export const DetailsPanel = React.memo(
 
     let visiblePanel = null; // store in variable to make return statement more readable
     let panelSize: EuiFlyoutProps['size'] = 's';
+    let flyoutUniqueKey = timelineId;
     const contextID = `${timelineId}-${activeTab}`;
     const isDraggable = timelineId === TimelineId.active && activeTab === TimelineTabs.query;
 
     if (currentTabDetail?.panelView === 'eventDetail' && currentTabDetail?.params?.eventId) {
       panelSize = 'm';
+      flyoutUniqueKey = currentTabDetail.params.eventId;
       visiblePanel = (
         <EventDetailsPanel
           browserFields={browserFields}
@@ -96,6 +98,7 @@ export const DetailsPanel = React.memo(
     }
 
     if (currentTabDetail?.panelView === 'hostDetail' && currentTabDetail?.params?.hostName) {
+      flyoutUniqueKey = currentTabDetail.params.hostName;
       visiblePanel = (
         <HostDetailsPanel
           contextID={contextID}
@@ -108,6 +111,7 @@ export const DetailsPanel = React.memo(
     }
 
     if (currentTabDetail?.panelView === 'userDetail' && currentTabDetail?.params?.userName) {
+      flyoutUniqueKey = currentTabDetail.params.userName;
       visiblePanel = (
         <UserDetailsPanel
           contextID={contextID}
@@ -120,6 +124,7 @@ export const DetailsPanel = React.memo(
     }
 
     if (currentTabDetail?.panelView === 'networkDetail' && currentTabDetail?.params?.ip) {
+      flyoutUniqueKey = currentTabDetail.params.ip;
       visiblePanel = (
         <NetworkDetailsPanel
           contextID={contextID}
@@ -137,6 +142,7 @@ export const DetailsPanel = React.memo(
         size={panelSize}
         onClose={closePanel}
         ownFocus={false}
+        key={flyoutUniqueKey}
       >
         {visiblePanel}
       </EuiFlyout>