chore: use native link with .stretched-link in select market table

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

@@ -164,7 +164,6 @@ export type OnCellClickHandler = (
 
 export const columns = (
   market: MarketMaybeWithDataAndCandles,
-  onSelect: (id: string) => void,
   onCellClick: OnCellClickHandler,
   inViewRoot?: RefObject<HTMLElement>
 ) => {
@@ -174,14 +173,6 @@ export const columns = (
   const candleLow = market.candles && calcCandleLow(market.candles);
   const candleHigh = market.candles && calcCandleHigh(market.candles);
   const candleVolume = market.candles && calcCandleVolume(market.candles);
-  const handleKeyPress = (
-    event: React.KeyboardEvent<HTMLAnchorElement>,
-    id: string
-  ) => {
-    if (event.key === 'Enter' && onSelect) {
-      return onSelect(id);
-    }
-  };
   const selectMarketColumns: Column[] = [
     {
       kind: ColumnKind.Market,
@@ -189,11 +180,7 @@ export const columns = (
         <Link
           to={Links[Routes.MARKET](market.id)}
           data-testid={`market-link-${market.id}`}
-          onKeyPress={(event) => handleKeyPress(event, market.id)}
-          onClick={(e) => {
-            e.preventDefault();
-            onSelect(market.id);
-          }}
+          className="stretched-link"
         >
           <UILink>{market.tradableInstrument.instrument.code}</UILink>
         </Link>
@@ -252,7 +239,7 @@ export const columns = (
       value: (
         <button
           data-dialog-trigger
-          className="inline underline"
+          className="inline underline relative z-[1]"
           onClick={(e) => {
             e.stopPropagation();
             onCellClick(
@@ -352,7 +339,6 @@ export const columns = (
 
 export const columnsPositionMarkets = (
   market: MarketMaybeWithDataAndCandles,
-  onSelect: (id: string) => void,
   inViewRoot?: RefObject<HTMLElement>,
   openVolume?: string,
   onCellClick?: OnCellClickHandler
@@ -362,14 +348,6 @@ export const columnsPositionMarkets = (
     .filter((c: string | undefined): c is CandleClose => !isNil(c));
   const candleLow = market.candles && calcCandleLow(market.candles);
   const candleHigh = market.candles && calcCandleHigh(market.candles);
-  const handleKeyPress = (
-    event: React.KeyboardEvent<HTMLSpanElement>,
-    id: string
-  ) => {
-    if (event.key === 'Enter' && onSelect) {
-      return onSelect(id);
-    }
-  };
   const candleVolume = market.candles && calcCandleVolume(market.candles);
   const selectMarketColumns: Column[] = [
     {
@@ -378,11 +356,7 @@ export const columnsPositionMarkets = (
         <Link
           to={Links[Routes.MARKET](market.id)}
           data-testid={`market-link-${market.id}`}
-          onKeyPress={(event) => handleKeyPress(event, market.id)}
-          onClick={(e) => {
-            e.preventDefault();
-            onSelect(market.id);
-          }}
+          className="stretched-link"
         >
           <UILink>{market.tradableInstrument.instrument.code}</UILink>
         </Link>
@@ -441,7 +415,7 @@ export const columnsPositionMarkets = (
       value: (
         <button
           data-dialog-trigger
-          className="inline underline"
+          className="inline underline relative"
           onClick={(e) => {
             e.stopPropagation();
             if (!onCellClick) return;

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

@@ -32,20 +32,15 @@ export const SelectMarketTableHeader = ({
 export const SelectMarketTableRow = ({
   detailed = false,
   columns,
-  onSelect,
   marketId,
 }: {
   detailed?: boolean;
   columns: Column[];
-  onSelect: (id: string) => void;
   marketId: string;
 }) => {
   return (
     <tr
       className={`hover:bg-neutral-200 dark:hover:bg-neutral-700 cursor-pointer relative h-[34px]`}
-      onClick={() => {
-        onSelect(marketId);
-      }}
       data-testid={`market-link-${marketId}`}
     >
       {columns.map(({ kind, value, className, dataTestId, onlyOnDetailed }) => {

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

@@ -162,14 +162,12 @@ describe('SelectMarket', () => {
   const table = document.createElement('table');
 
   it('should render the SelectAllMarketsTableBody', () => {
-    const onSelect = jest.fn();
     const onCellClick = jest.fn();
     const { container } = render(
       <MemoryRouter>
         <SelectAllMarketsTableBody
           markets={[MARKET_A as Market, MARKET_B as Market]}
           onCellClick={onCellClick}
-          onSelect={onSelect}
         />
       </MemoryRouter>,
       { wrapper: MockedProvider, container: document.body.appendChild(table) }
@@ -177,7 +175,5 @@ describe('SelectMarket', () => {
     expect(screen.getByText('ABCDEF')).toBeTruthy(); // name
     expect(screen.getByText('25.00%')).toBeTruthy(); // price change
     expect(container).toHaveTextContent(/1,000/); // volume
-    fireEvent.click(screen.getAllByTestId(`market-link-1`)[0]);
-    expect(onSelect).toHaveBeenCalledWith('1');
   });
 });

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

@@ -1,5 +1,6 @@
-import { useCallback, useEffect, useMemo, useState, useRef } from 'react';
+import { useEffect, useMemo, useState, useRef } from 'react';
 import type { RefObject } from 'react';
+import { useLocation } from 'react-router-dom';
 import { useMarketList } from '@vegaprotocol/market-list';
 import { positionsDataProvider } from '@vegaprotocol/positions';
 import { t } from '@vegaprotocol/i18n';
@@ -31,16 +32,14 @@ import { HeaderTitle } from '../header';
 export const SelectAllMarketsTableBody = ({
   markets,
   positions,
-  onSelect,
   onCellClick,
   inViewRoot,
   headers = columnHeaders,
-  tableColumns = (market) => columns(market, onSelect, onCellClick, inViewRoot),
+  tableColumns = (market) => columns(market, onCellClick, inViewRoot),
 }: {
   markets?: MarketMaybeWithDataAndCandles[] | null;
   positions?: PositionFieldsFragment[];
   title?: string;
-  onSelect: (id: string) => void;
   onCellClick: OnCellClickHandler;
   headers?: Column[];
   tableColumns?: (
@@ -65,7 +64,6 @@ export const SelectAllMarketsTableBody = ({
               marketId={market.id}
               key={i}
               detailed
-              onSelect={onSelect}
               columns={tableColumns(
                 market,
                 inViewRoot,
@@ -90,7 +88,6 @@ export const SelectAllMarketsTableBody = ({
 export const SelectMarketPopover = ({
   marketCode,
   marketName,
-  onSelect,
   onCellClick,
 }: {
   marketCode: string;
@@ -115,13 +112,10 @@ export const SelectMarketPopover = ({
     variables: { partyId: pubKey || '' },
     skip: !pubKey,
   });
-  const onSelectMarket = useCallback(
-    (marketId: string) => {
-      onSelect(marketId);
-      setOpen(false);
-    },
-    [onSelect]
-  );
+  const location = useLocation();
+  useEffect(() => {
+    setOpen(false);
+  }, [location]);
 
   const iconClass = open ? 'rotate-180' : '';
   const markets = useMemo(
@@ -172,13 +166,11 @@ export const SelectMarketPopover = ({
                   inViewRoot={inViewRoot}
                   markets={markets}
                   positions={positions || undefined}
-                  onSelect={onSelectMarket}
                   onCellClick={onCellClick}
                   headers={columnHeadersPositionMarkets}
                   tableColumns={(market, inViewRoot, openVolume) =>
                     columnsPositionMarkets(
                       market,
-                      onSelectMarket,
                       inViewRoot,
                       openVolume,
                       onCellClick
@@ -191,7 +183,6 @@ export const SelectMarketPopover = ({
             <SelectAllMarketsTableBody
               inViewRoot={inViewRoot}
               markets={data}
-              onSelect={onSelectMarket}
               onCellClick={onCellClick}
             />
           </table>

apps/trading/pages/styles.css

@@ -56,3 +56,13 @@ html [data-theme='light'] {
   --pennant-color-depth-sell-fill: theme('colors.vega.pink.400');
   --pennant-color-depth-sell-stroke: theme('colors.vega.pink.550');
 }
+
+.stretched-link::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  content: '';
+}