Cell Editor Broke when updating aggrid from 26 to 30 using typeahead as cell editor react

Question

In aggrid I added Search using typeahead before in version 26 I used to search values in cell editor had set typeahead to cell editor and set values to cell but after updating to "ag-grid-react": "^30.2.1", and "react-bootstrap-typeahead": "^6.3.2", with react "react": "^18.2.0", from 17

now in the new version when i press enter I doesn't work onchange function in typeahead don't run so not getting value it stop the editing and returns empty

it works when doing onclick from mouse https://stackblitz.com/edit/stackblitz-starters-qzfo2x?file=src%2FApp.tsx

Answer 1

Got Solution by using my logic

const [highlightedIndex, setHighlightedIndex] = useState(-1);

const handleKeyDown = (e) => {
    // Handle down arrow key to highlight the next suggestion
    if (e.key === 'ArrowDown') {
        e.preventDefault();
        const nextIndex = highlightedIndex + 1;
        if (nextIndex < productSearch.options.length) {
            setHighlightedIndex(nextIndex);
        } else {
            setHighlightedIndex(-1);
        }
    } else if (e.key === "ArrowUp") {
        e.preventDefault();
        const prevousIndex = highlightedIndex - 1;
        if (prevousIndex >= 0) {
            setHighlightedIndex(prevousIndex);
        } else if (highlightedIndex === -1) {
            setHighlightedIndex(productSearch.options.length - 1)
        } else {
            setHighlightedIndex(-1)
        }
    }
};
const handleInputChange = (input) => {
    // Update the input value
    console.log("Input Value", input);
    // Reset the highlighted index when input changes
    setHighlightedIndex(-1);
};

useImperativeHandle(ref, () => {
    return {
        getValue() {

            // dispatch(purchaseAction.setProductOption(productSearch.options));
            // dispatch(purchaseAction.setActiveIndex(highlightedIndex));
            const selected = productSearch.options[highlightedIndex] && productSearch.options[highlightedIndex] ? productSearch.options[highlightedIndex] : []
            console.log({ productSearch });
            if (selected && selected.name) {
                const valueReturn = selected ? selected.name : "";
                dispatch(purchaseAction.setSelectedProduct([selected]))
                return selected.name;
            }
            console.log("! ", productSearch.selected);
            dispatch(purchaseAction.setSelectedProduct([selected]))
            return "";

        },

        myCustomFunction() {
            return {
                rowIndex: props.rowIndex,
                colId: props.column.getId(),
            };
        },
    };
});

this way i use onkeydownd to get value from option by giving index