onClick event for 'X' button on TextInput component

[BRIDGE-AI]

When I wan to make TextInput update value only by pressing Enter, I should implement onKeyDown event handler for InputText.
The 'search' typed InputText has X button when hovered with filled text.

I should catch the onClick event for the X button because I disabled onInput for Enter pressing value update.

Can you suggest best way how to implement this?
I couldn't find it yet.

[melloware]

This is what we do in PrimeFaces JSF using jQuery so this should give you a hint on how to capture the "X". You need to capture the onSearch DOM event.

/**
     * Sets up the 'search' event which for HTML5 text search fields handles the clear 'x' button.
     * @private
     * @param {JQuery} filter INPUT element of the text filter.
     */
    bindClearFilterEvent: function(filter) {
        var $this = this;

        filter.off('search').on('search', function(e) {
            // only care when 'X'' is clicked
            if ($(this).val() == "") {
                $this.filter();
            }
        });
    }

[BRIDGE-AI]

Thank you, @melloware

I've write this code by refering your comment.
It works fine for me.

const Page = (...) => {
    ...

    const [globalFilter, setGlobalFilter] = useState(null);
    const textInputRef = useRef(null);

    useEffect(() => {
        const func = (e) => {
            if (e.currentTarget.value == '') {
                onGlobalFilterChange(e.currentTarget.value);
            }
        }

        textInputRef.current.removeEventListener('search', func)
        textInputRef.current.addEventListener('search', func)
    }, [onGlobalFilterChange]);

    ...
}

                ...

                <InputText type="search"
                    ref={textInputRef}
                    value={globalFilter || ""}
                    onInput={(e) => {
                        setGlobalFilter(e.currentTarget.value);
                    }}
                    onKeyDown={(e) => {
                        if (e.key == "Enter") {
                            e.stopPropagation();
                            onGlobalFilterChange(globalFilter);
                            return;
                        }
                    }}
                    placeholder="Search..."
                />

                ...

I hope this code helps someone else.