fix(trading): welcome dialog with markets list click on market close window (#3404)

apps/trading/components/select-market/select-market-columns.tsx

@@ -185,7 +185,7 @@ export const columns = (
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
-            onSelect(market.id, e.metaKey);
+            onSelect(market.id, e.metaKey || e.ctrlKey);
           }}
         >
           <UILink>{market.tradableInstrument.instrument.code}</UILink>
@@ -366,7 +366,7 @@ export const columnsPositionMarkets = (
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
-            onSelect(market.id, e.metaKey);
+            onSelect(market.id, e.metaKey || e.ctrlKey);
           }}
         >
           <UILink>{market.tradableInstrument.instrument.code}</UILink>

apps/trading/components/select-market/select-market-table.tsx

@@ -44,7 +44,7 @@ export const SelectMarketTableRow = ({
     <tr
       className={`hover:bg-neutral-200 dark:hover:bg-neutral-700 cursor-pointer relative h-[34px]`}
       onClick={(ev) => {
-        onSelect(marketId, ev.metaKey);
+        onSelect(marketId, ev.metaKey || ev.ctrlKey);
       }}
       data-testid={`market-link-${marketId}`}
     >

apps/trading/components/welcome-dialog/welcome-landing-dialog.spec.tsx

@@ -8,6 +8,10 @@ import type {
   MarketData,
 } from '@vegaprotocol/market-list';
 import { SelectMarketLandingTable } from './welcome-landing-dialog';
+const mockMarketClickHandler = jest.fn();
+jest.mock('../../lib/hooks/use-market-click-handler', () => ({
+  useMarketClickHandler: () => mockMarketClickHandler,
+}));
 
 type Market = MarketMaybeWithCandles & MarketMaybeWithData;
 type PartialMarket = Partial<
@@ -174,4 +178,25 @@ describe('WelcomeLandingDialog', () => {
     fireEvent.click(screen.getAllByTestId(`market-link-2`)[0]);
     expect(onClose).toHaveBeenCalled();
   });
+
+  it('should not call onClose when metaKey is held', () => {
+    const onClose = jest.fn();
+
+    render(
+      <MemoryRouter>
+        <SelectMarketLandingTable
+          markets={[MARKET_A as Market, MARKET_B as Market]}
+          onClose={onClose}
+        />
+      </MemoryRouter>,
+      { wrapper: MockedProvider }
+    );
+    fireEvent.click(screen.getAllByTestId(`market-link-1`)[0], {
+      metaKey: true,
+    });
+    expect(mockMarketClickHandler).toHaveBeenCalled();
+    expect(onClose).not.toHaveBeenCalled();
+    fireEvent.click(screen.getAllByTestId(`market-link-1`)[0]);
+    expect(onClose).toHaveBeenCalled();
+  });
 });

apps/trading/components/welcome-dialog/welcome-landing-dialog.tsx

@@ -12,9 +12,10 @@ import {
   SelectMarketTableRow,
 } from '../select-market';
 import { WelcomeDialogHeader } from './welcome-dialog-header';
-import { Link, useNavigate, useParams } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { ProposedMarkets } from './proposed-markets';
 import { Links, Routes } from '../../pages/client-router';
+import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 
 export const SelectMarketLandingTable = ({
   markets,
@@ -23,23 +24,13 @@ export const SelectMarketLandingTable = ({
   markets: MarketMaybeWithDataAndCandles[] | null;
   onClose: () => void;
 }) => {
-  const params = useParams();
-  const navigate = useNavigate();
-  const marketId = params.marketId;
-
-  const onSelect = useCallback(
-    (id: string) => {
-      if (id && id !== marketId) {
-        navigate(Links[Routes.MARKET](id));
-      }
-    },
-    [marketId, navigate]
-  );
-
+  const onSelect = useMarketClickHandler();
   const onSelectMarket = useCallback(
-    (id: string) => {
-      onSelect(id);
-      onClose();
+    (id: string, metaKey?: boolean) => {
+      onSelect(id, metaKey);
+      if (!metaKey) {
+        onClose();
+      }
     },
     [onSelect, onClose]
   );
@@ -73,7 +64,7 @@ export const SelectMarketLandingTable = ({
                 key={i}
                 detailed={false}
                 onSelect={onSelectMarket}
-                columns={columns(market, onSelect, onCellClick)}
+                columns={columns(market, onSelectMarket, onCellClick)}
               />
             ))}
           </tbody>

libs/datagrid/src/lib/cells/market-name-cell.tsx

@@ -21,7 +21,7 @@ export const MarketNameCell = ({
       ev.preventDefault();
       ev.stopPropagation();
       if (onMarketClick) {
-        onMarketClick(id, ev.metaKey);
+        onMarketClick(id, ev.metaKey || ev.ctrlKey);
       }
     },
     [id, onMarketClick]

libs/deal-ticket/src/components/trading-mode-tooltip/compile-grid-data.tsx

@@ -78,7 +78,9 @@ export const compileGridData = (
       label: (
         <Link
           to={`/liquidity/${market.id}`}
-          onClick={(ev) => onSelect && onSelect(market.id, ev.metaKey)}
+          onClick={(ev) =>
+            onSelect && onSelect(market.id, ev.metaKey || ev.ctrlKey)
+          }
         >
           <UILink>{t('Current liquidity')}</UILink>
         </Link>

libs/market-info/src/components/market-info/info-market.tsx

@@ -169,7 +169,7 @@ export const Info = ({ market, onSelect }: InfoProps) => {
         <LiquidityInfoPanel market={market}>
           <Link
             to={`/liquidity/${market.id}`}
-            onClick={(ev) => onSelect?.(market.id, ev.metaKey)}
+            onClick={(ev) => onSelect?.(market.id, ev.metaKey || ev.ctrlKey)}
             data-testid="view-liquidity-link"
           >
             <UILink>{t('View liquidity provision table')}</UILink>

libs/market-list/src/lib/components/markets-container/markets-container.tsx

@@ -47,7 +47,8 @@ export const MarketsContainer = ({ onSelect }: MarketsContainerProps) => {
           }
           onSelect(
             (data as MarketMaybeWithData).id,
-            (event as unknown as MouseEvent)?.metaKey
+            (event as unknown as MouseEvent)?.metaKey ||
+              (event as unknown as MouseEvent)?.ctrlKey
           );
         }}
         onMarketClick={onSelect}