My document is not defined because of lost context

Working with vanilla.js and my code looks like this:

class Restaurant {
  constructor() {
    this.menu = [];
    this.categories = ['all'];
  }
  handleSearch(event) {
    const searchInput = document.querySelector('.search-input');
    const minPriceInput = document.querySelector('.min-price');
    const maxPriceInput = document.querySelector('.max-price');
    if (event.target.matches('.search-btn')) {
      event.preventDefault();
      const keyword = searchInput.value.toLowerCase();
      const minPrice = minPriceInput.value || 0;
      const maxPrice = maxPriceInput || Infinity;
      let category = docuemnt.querySelector(".filter-active").dataset.id;
      let filteredMenu = [];
      if (category === this.categories[0]) { // categories[0] is "all";
        filteredMenu = menu.filter(item => {
          return item.title.includes(keyword) && item.price >= minPrice && item.price <= maxPrice;
        })
        this.renderMenu(filteredMenu);
      } else {
        filteredMenu = menu.filter(item => {
          return item.category === selectedCategory && item.title.includes(keyword) && item.price >= minPrice && item.price <= maxPrice;
        })
        this.renderMenu(filteredMenu);
      }
    }
  }
  render() {
    const buttonsContainer = document.querySelector('.btn-container');
    const searchButton = document.querySelector('.search-btn');
    buttonsContainer.addEventListener('click', this.handleFilter.bind(this));
    searchButton.addEventListener('click', this.handleSearch.bind(this));
    this.setCategories();
    this.renderButtons();
    this.renderMenu(this.menu);
  }
}

my document object is undefined inside the handleSearch method. Is it possible to solve this problem without placing all element variables outside the method? Even if I do so I have another variable "categories" which is using document object.