I have a problem with Modal. When I clicked out of that, it works (remove class), but when I click into the Modal, it also works. I need when I click into that, the class has not to remove. For example, if I clicked .little-inputs into the modal, it also works.

The places I got in the red circle are working. Also in green.

HTML

      <div class="detailed-search">
                <input readonly type="text" placeholder="Ətraflı axtarış" class="textBox"/>
                <div class="search-options">
                    <div class="detail-search-form">
                        <label for="floorMin">Mərtəbə</label>
                        <div class="little-inputs">
                            <div class="form-input">
                               
                   ..........
             
   
                </div>
            </div>

JS

       const detailSearch = document.querySelector(".detailed-search");
        const searchOptions = document.querySelector(".search-options");
        const textbox = document.querySelector(".textBox");
        const detailForm = document.querySelector(".detail-search-form");

        detailSearch.addEventListener("click", () => {
            searchOptions.classList.toggle("detailed-search-active")
        });

        window.addEventListener("click", (e) => {
            if (e.target == searchOptions || e.target == detailSearch || e.target == textbox || e.target == detailForm) {
                searchOptions.classList.add("detailed-search-active");
            } else {
                searchOptions.classList.remove("detailed-search-active");
            };
        });