Explore/Loki: Fix context menu log line highlighting (#25731)

* Add stopPropragation to context

* Remove redundant stopPropagation from header

* Format comment

packages/grafana-ui/src/components/Logs/LogRowContext.tsx

@@ -102,11 +102,6 @@ const LogRowContextGroupHeader: React.FunctionComponent<LogRowContextGroupHeader
   const theme = useContext(ThemeContext);
   const theme = useContext(ThemeContext);
   const { header } = getLogRowContextStyles(theme);
   const { header } = getLogRowContextStyles(theme);
 
 
-  const onClickLoadMore = (event: React.SyntheticEvent) => {
-    event.stopPropagation();
-    onLoadMoreContext();
-  };
-
   return (
   return (
     <div className={header}>
     <div className={header}>
       <span
       <span
@@ -125,7 +120,7 @@ const LogRowContextGroupHeader: React.FunctionComponent<LogRowContextGroupHeader
               cursor: pointer;
               cursor: pointer;
             }
             }
           `}
           `}
-          onClick={onClickLoadMore}
+          onClick={onLoadMoreContext}
         >
         >
           Load 10 more
           Load 10 more
         </span>
         </span>
@@ -217,7 +212,9 @@ export const LogRowContext: React.FunctionComponent<LogRowContextProps> = ({
 
 
   return (
   return (
     <ClickOutsideWrapper onClick={onOutsideClick}>
     <ClickOutsideWrapper onClick={onOutsideClick}>
-      <div>
+      {/* e.stopPropagation is necessary so the log details doesn't open when clicked on log line in context
+       * and/or when context log line is being highlighted */}
+      <div onClick={e => e.stopPropagation()}>
         {context.after && (
         {context.after && (
           <LogRowContextGroup
           <LogRowContextGroup
             rows={context.after}
             rows={context.after}