fix: dropdown closing on market list

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

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { addDecimalsFormatNumber, toBigNum } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import type {
@@ -15,13 +15,13 @@ import {
   SetFilter,
 } from '@vegaprotocol/datagrid';
 import { ButtonLink } from '@vegaprotocol/ui-toolkit';
-import { AgGridColumn } from 'ag-grid-react';
 import type { AgGridReact } from 'ag-grid-react';
 import * as Schema from '@vegaprotocol/types';
 import type { MarketMaybeWithData } from '../../markets-provider';
 import { MarketTableActions } from './market-table-actions';
 import { OracleStatus } from './oracle-status';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
+import type { ColDef } from 'ag-grid-community';
 
 const { MarketTradingMode, AuctionTrigger } = Schema;
 
@@ -58,41 +58,27 @@ export const MarketListTable = forwardRef<
   }
 >(({ onMarketClick, ...props }, ref) => {
   const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
-  return (
-    <AgGrid
-      style={{ width: '100%', height: '100%' }}
-      getRowId={getRowId}
-      ref={ref}
-      defaultColDef={{
-        resizable: true,
-        sortable: true,
-        filter: true,
-        filterParams: { buttons: ['reset'] },
-        minWidth: 100,
-      }}
-      suppressCellFocus
-      components={{ PriceFlashCell, MarketName }}
-      storeKey="allMarkets"
-      {...props}
-    >
-      <AgGridColumn
-        headerName={t('Market')}
-        field="tradableInstrument.instrument.code"
-        cellRenderer="MarketName"
-        cellRendererParams={{ onMarketClick }}
-      />
-      <AgGridColumn
-        headerName={t('Description')}
-        field="tradableInstrument.instrument.name"
-      />
-      <AgGridColumn
-        headerName={t('Trading mode')}
-        field="tradingMode"
-        minWidth={170}
-        valueFormatter={({
+
+  const coldefs = useMemo(() => {
+    const defs: ColDef[] = [
+      {
+        headerName: t('Market'),
+        field: 'tradableInstrument.instrument.code',
+        cellRenderer: 'MarketName',
+        cellRendererParams: { onMarketClick },
+      },
+      {
+        headerName: t('Description'),
+        field: 'tradableInstrument.instrument.name',
+      },
+      {
+        headerName: t('Trading mode'),
+        field: 'tradingMode',
+        minWidth: 170,
+        valueFormatter: ({
           data,
         }: VegaValueFormatterParams<MarketMaybeWithData, 'data'>) => {
-          if (!data?.data) return undefined;
+          if (!data?.data) return '-';
           const { trigger, marketTradingMode } = data.data;
           return marketTradingMode ===
             MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
@@ -101,59 +87,58 @@ export const MarketListTable = forwardRef<
             ? `${Schema.MarketTradingModeMapping[marketTradingMode]}
             - ${Schema.AuctionTriggerMapping[trigger]}`
             : Schema.MarketTradingModeMapping[marketTradingMode];
-        }}
-        filter={SetFilter}
-        filterParams={{
+        },
+        filter: SetFilter,
+        filterParams: {
           set: Schema.MarketTradingModeMapping,
-        }}
-      />
-      <AgGridColumn
-        headerName={t('Status')}
-        field="state"
-        valueFormatter={({
+        },
+      },
+      {
+        headerName: t('Status'),
+        field: 'state',
+        valueFormatter: ({
           data,
         }: VegaValueFormatterParams<MarketMaybeWithData, 'state'>) => {
           return data?.state ? Schema.MarketStateMapping[data.state] : '-';
-        }}
-        filter={SetFilter}
-        filterParams={{
+        },
+        filter: SetFilter,
+        filterParams: {
           set: Schema.MarketStateMapping,
-        }}
-      />
-      <AgGridColumn
-        headerName={t('Best bid')}
-        field="data.bestBidPrice"
-        type="rightAligned"
-        cellRenderer="PriceFlashCell"
-        filter="agNumberColumnFilter"
-        valueGetter={({
+        },
+      },
+      {
+        headerName: t('Best bid'),
+        field: 'data.bestBidPrice',
+        type: 'rightAligned',
+        cellRenderer: 'PriceFlashCell',
+        filter: 'agNumberColumnFilter',
+        valueGetter: ({
           data,
         }: VegaValueGetterParams<MarketMaybeWithData, 'data.bestBidPrice'>) => {
           return data?.data?.bestBidPrice === undefined
             ? undefined
             : toBigNum(data?.data?.bestBidPrice, data.decimalPlaces).toNumber();
-        }}
-        valueFormatter={({
+        },
+        valueFormatter: ({
           data,
         }: VegaValueFormatterParams<
           MarketMaybeWithData,
           'data.bestBidPrice'
         >) =>
           data?.data?.bestBidPrice === undefined
-            ? undefined
+            ? '-'
             : addDecimalsFormatNumber(
                 data.data.bestBidPrice,
                 data.decimalPlaces
-              )
-        }
-      />
-      <AgGridColumn
-        headerName={t('Best offer')}
-        field="data.bestOfferPrice"
-        type="rightAligned"
-        cellRenderer="PriceFlashCell"
-        filter="agNumberColumnFilter"
-        valueGetter={({
+              ),
+      },
+      {
+        headerName: t('Best offer'),
+        field: 'data.bestOfferPrice',
+        type: 'rightAligned',
+        cellRenderer: 'PriceFlashCell',
+        filter: 'agNumberColumnFilter',
+        valueGetter: ({
           data,
         }: VegaValueGetterParams<
           MarketMaybeWithData,
@@ -165,46 +150,44 @@ export const MarketListTable = forwardRef<
                 data?.data?.bestOfferPrice,
                 data.decimalPlaces
               ).toNumber();
-        }}
-        valueFormatter={({
+        },
+        valueFormatter: ({
           data,
         }: VegaValueFormatterParams<
           MarketMaybeWithData,
           'data.bestOfferPrice'
         >) =>
           data?.data?.bestOfferPrice === undefined
-            ? undefined
+            ? '-'
             : addDecimalsFormatNumber(
                 data.data.bestOfferPrice,
                 data.decimalPlaces
-              )
-        }
-      />
-      <AgGridColumn
-        headerName={t('Mark price')}
-        field="data.markPrice"
-        type="rightAligned"
-        cellRenderer="PriceFlashCell"
-        filter="agNumberColumnFilter"
-        valueGetter={({
+              ),
+      },
+      {
+        headerName: t('Mark price'),
+        field: 'data.markPrice',
+        type: 'rightAligned',
+        cellRenderer: 'PriceFlashCell',
+        filter: 'agNumberColumnFilter',
+        valueGetter: ({
           data,
         }: VegaValueGetterParams<MarketMaybeWithData, 'data.markPrice'>) => {
           return data?.data?.markPrice === undefined
             ? undefined
             : toBigNum(data?.data?.markPrice, data.decimalPlaces).toNumber();
-        }}
-        valueFormatter={({
+        },
+        valueFormatter: ({
           data,
         }: VegaValueFormatterParams<MarketMaybeWithData, 'data.markPrice'>) =>
           data?.data?.bestOfferPrice === undefined
-            ? undefined
-            : addDecimalsFormatNumber(data.data.markPrice, data.decimalPlaces)
-        }
-      />
-      <AgGridColumn
-        headerName={t('Settlement asset')}
-        field="tradableInstrument.instrument.product.settlementAsset.symbol"
-        cellRenderer={({
+            ? '-'
+            : addDecimalsFormatNumber(data.data.markPrice, data.decimalPlaces),
+      },
+      {
+        headerName: t('Settlement asset'),
+        field: 'tradableInstrument.instrument.product.settlementAsset.symbol',
+        cellRenderer: ({
           data,
         }: VegaICellRendererParams<
           MarketMaybeWithData,
@@ -223,13 +206,13 @@ export const MarketListTable = forwardRef<
           ) : (
             ''
           );
-        }}
-      />
-      <AgGridColumn
-        colId="market-actions"
-        field="id"
-        {...COL_DEFS.actions}
-        cellRenderer={({
+        },
+      },
+      {
+        colId: 'market-actions',
+        field: 'id',
+        ...COL_DEFS.actions,
+        cellRenderer: ({
           data,
         }: VegaICellRendererParams<MarketMaybeWithData>) => {
           if (!data) return null;
@@ -241,9 +224,31 @@ export const MarketListTable = forwardRef<
               }
             />
           );
-        }}
-      />
-    </AgGrid>
+        },
+      },
+    ];
+
+    return defs;
+  }, [onMarketClick, openAssetDetailsDialog]);
+
+  return (
+    <AgGrid
+      style={{ width: '100%', height: '100%' }}
+      getRowId={getRowId}
+      ref={ref}
+      defaultColDef={{
+        resizable: true,
+        sortable: true,
+        filter: true,
+        filterParams: { buttons: ['reset'] },
+        minWidth: 100,
+      }}
+      columnDefs={coldefs}
+      suppressCellFocus
+      components={{ PriceFlashCell, MarketName }}
+      storeKey="allMarkets"
+      {...props}
+    />
   );
 });