Working in a JS class trying to add and remove a keydown eventlistener to the document that closes the popup using a class method

Question

The code seems to fall apart in _handleEscClose when the close method is called, I'm pretty sure this is because of the "this" logic, but I cannot figure out an alternative method to close the popup via the escape key. Is there a way to provide the listener with the proper method without removing the ability to remove the event listener?

I think I worded this poorly, my issue is that _handleEscClose is not closing the popup, I believe it's because the call to this.close() is not working, and I'm having trouble getting it to work without using an arrow function in the eventlistener callback which then removes the ability to remove the eventlistener.

here's the relevant code

close() {
    this._popupElement.classList.add("invisible");
    document.removeEventListener("keydown", this._handleEscClose);
}

open() {
    this._popupElement.classList.remove("invisible");
    document.addEventListener("keydown", this._handleEscClose);
}

_handleEscClose(evt) {
    if (evt.key === "Escape") {
        console.log("Escape!");
        this.close();
    }
}

Tried swapping to an arrow function on the event listener but that seems to make the listener unremovable

I was able to solve it by changing _handeEscClose into an arrow function, instead of the the event listener callback.

_handleEscClose = (evt) => {
    if (evt.key === "Escape") {
        console.log("baba");
        this.close();
    }
}