I am having an issue with my Ag-Grid. In my table’s columnDef, i have a dropdown column which is using a custom component using cellEditorSelector. However, When i select a value and click away from the dropdown, my onCellValueChanged breakpoint cannot be reached. Which also means it cannot detect the change. Why is that so? I have tried to look for similar issue but could not find any.

    {
      headerName: 'Dropdown',
      field: 'category',
      suppressMenu: true,
      floatingFilterComponentParams: { suppressFilterButton: true },
      cellEditorPopup: true,
      cellEditorSelector: (params: any) => {
        return {
          component: DropdownSingle,
          params: {
            options: categories, 
            valueOptionField: 'id', 
            titleOptionField: 'name', 
            valueKey: 'category',
            applyFields: [['category', 'id']],
          },
          popup: true,
        };
      },
      cellRenderer: (params: any) => {
        const categoryObject = categories.find(c => c.id === params.value);
        return categoryObject ? categoryObject.name : '';
      }
    },


  const onCellValueChanged = (event: any) =>{
    const data = event.data;
  };

  return (
    <div id='invoice-page' style={containerStyle}>
        <div style={gridStyle} className='ag-theme-alpine'>
          <AgGridReact
            ref={gridRef}
            rowData={rowsData}
            columnDefs={agColumns}
            sortingOrder={sortingOrder}
            defaultColDef={defaultColDef}
            autoGroupColumnDef={autoGroupColumnDef}
            treeData={true}
            animateRows={true}
            groupDefaultExpanded={-1}
            getDataPath={getDataPath}
            onCellValueChanged={onCellValueChanged}
            getContextMenuItems={getContextMenuItems}
          />
        </div>
    </div>
  );

import { Button, Select } from 'antd';
import React, {
  forwardRef,
  useEffect,
  useImperativeHandle,
  useRef,
  useState,
} from 'react';
import ReactDOM from 'react-dom';

const { Option } = Select;

const DropdownSingle = forwardRef((props: any, ref: any) => {
  const {
    options,
    data,
    valueOptionField,
    titleOptionField,
    applyFields,
    value,
  } = props;

  const refContainer = useRef(null);

  const [selectedValue, setSelectedValue] = useState(value);

  useEffect(() => {
    console.log('data cellSelect:', data);
  }, [data]);

  useEffect(() => {
    focus();
  }, []);

  const focus = () => {
    window.setTimeout(() => {
      let container: any = ReactDOM.findDOMNode(refContainer.current);
      if (container) {
        container?.focus();
      }
    });
  };

  useImperativeHandle(ref, () => {
    return {
      getValue() {
        const selectedOption = options.find((option: any) => option[titleOptionField] === selectedValue);
        return selectedOption ? selectedOption.id : null;
      },

      isPopup() {
        return true;
      },

      afterGuiAttached() {
        focus();
      },
    };
  });


  const handleSelect = (value: any) => {
    const option = options.find(
      (item: any) => item[valueOptionField] === value
    );
    if (option) {
      for (let applyField of applyFields) {
        data[applyField[0]] = option[applyField[1]];
      }
      setSelectedValue(option[titleOptionField]);

    }
  };

  return (
    <div ref={refContainer} style={{ width: '100%' }}>
      <Select
        autoFocus={true}
        style={{ width: '100%', minWidth: 200 }}
        value={selectedValue}
        onSelect={(value: any) => {
          const option = options.find(
            (item: any) => item[valueOptionField] === value
          );
          if (option) {
            for (let applyField of applyFields) {
              data[applyField[0]] = option[applyField[1]];
            }
            setSelectedValue(option[titleOptionField]);
          }
        }}
        showSearch
        optionFilterProp='children'
        filterOption={(input: any, option: any) =>
          (option?.label ?? '').includes(input)
        }
        filterSort={(optionA, optionB) =>
          (optionA?.label ?? '')
            .toLowerCase()
            .localeCompare((optionB?.label ?? '').toLowerCase())
        }
        options={options?.map((item: any) => ({
          value: item[valueOptionField],
          label: item[titleOptionField],
        }))}
      />
    </div>
  );
});


export default DropdownSingle;