Unable to remove event listener from document

I have a button. When this button is clicked I do two things

1. Open up a search menu
2. Attach an event listener to the document body to listen for close events.

However, I cannot seem to be able to remove the eventlistener from the document on the close function. That is, the second time I try to open the menu, it immediately calls the close function

My question is…

How do I remove the document event listener?
And how do I make it so that if the user clicks the search menu, it does not trigger the document click event

openDesktopSearchMenu() {
    this.$desktopSearchMenu.style.height = '330px';
    document.addEventListener('click', this.closeDesktopSearchMenu.bind(this), true);
}

closeDesktopSearchMenu() {
    this.$desktopSearchMenu.style.height = '0px';
    document.removeEventListener('click', this.closeDesktopSearchMenu.bind(this), true);
}

Update July 24
Nick’s answer definitely put me in the right direction. However, the document was always being called first due to the capture parameter. So if the user clicks inside the search menu, it’s automatically closed.

Removing the capture parameter causes the close function to be invoked immediately after it opens.

The way around this that worked for me is to wrap the listener inside a timeout when I add it. And then naturally I had to call stopPropagation() on search menu click

searchMenuClick = (e) => {
    e.stopPropagation();
}

/** open the desktop search menu */
openDesktopSearchMenu = () => {
    this.$desktopSearchMenu.style.height = '330px';
    this.$navBar.classList.add('search');
    setTimeout(() => {
        document.addEventListener('click', this.closeDesktopSearchMenu, { capture: false });
    });
}

closeDesktopSearchMenu = () => {
    this.$desktopSearchMenu.style.height = '0px';
    setTimeout(() => {
        this.$navBar.classList.remove('search');
    }, 300);
    document.removeEventListener('click', this.closeDesktopSearchMenu, { capture: false });
}

constructor() {
  ...
  this.closeDesktopSearchMenu = this.closeDesktopSearchMenu.bind(this);
  ...
}

openDesktopSearchMenu() {
    this.$desktopSearchMenu.style.height = '330px';
    document.addEventListener('click', this.closeDesktopSearchMenu, true);
}

closeDesktopSearchMenu() {
    this.$desktopSearchMenu.style.height = '0px';
    document.removeEventListener('click', this.closeDesktopSearchMen, true);
}

class Test {
  constructor() {
    this.prop = "bar";
    this.foo = this.foo.bind(this);
  }
  
  foo() {
    console.log('Foo', this.prop);
  }
  
  a() {
    document.addEventListener('click', this.foo, true);
  }
  
  b() {
    document.removeEventListener('click', this.foo, true);
  }
}

const test = new Test();
console.log("Event listener added");
test.a();

setTimeout(() => {
  console.log("Event listener removed");
  test.b();
}, 3000);