app/javascript/controllers/search_controller.js - python-ml-service - Dmitry-F/cbt_tool

app/javascript/controllers/search_controller.js
86 строк3 KB
Dmitriy-Filatov
fix: клик вне области поиска скрывает результаты
19 мар 2026, 22:28
19 мар 2026, 22:28758ff54
import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["input", "results", "form"];

  connect() {
    console.log("🔍 Turbo-поиск инициализирован");
    console.log("🔍 Найденные таргеты:", {
      input: this.hasInputTarget,
      results: this.hasResultsTarget,
      form: this.hasFormTarget,
    });

    // ✅ Сохраняем привязанную функцию, чтобы потом её удалить
    this.boundHandleClickOutside = this.handleClickOutside.bind(this);
    document.addEventListener("click", this.boundHandleClickOutside);
  }

  disconnect() {
    // ✅ Удаляем ту же самую функцию
    document.removeEventListener("click", this.boundHandleClickOutside);
  }

  submit() {
    clearTimeout(this.timeout);

    const query = this.inputTarget.value.trim();

    if (query.length > 0) {
      this.timeout = setTimeout(() => {
        if (this.hasResultsTarget) {
          console.log("🔍 Убираем hidden, показываем результаты");
          this.resultsTarget.classList.remove("hidden");
        } else {
          console.error(
            "❌ resultsTarget не найден! Ищем через querySelector...",
          );
          const fallbackResults = document.querySelector(
            '[data-search-target="results"]',
          );
          if (fallbackResults) {
            fallbackResults.classList.remove("hidden");
            console.log("✅ fallbackResults сработал");
          }
        }

        if (this.hasFormTarget) {
          this.formTarget.requestSubmit();
        } else {
          console.error("❌ formTarget не найден! Ищем через querySelector...");
          const fallbackForm = document.querySelector(
            '[data-search-target="form"]',
          );
          if (fallbackForm) {
            fallbackForm.requestSubmit();
            console.log("✅ fallbackForm сработал");
          }
        }
      }, 300);
    } else {
      this.hideResults();
    }
  }

  hideResults(event) {
    if (!event || !this.element.contains(event.target)) {
      if (this.hasResultsTarget) {
        this.resultsTarget.classList.add("hidden");
      } else {
        const fallbackResults = document.querySelector(
          '[data-search-target="results"]',
        );
        if (fallbackResults) {
          fallbackResults.classList.add("hidden");
        }
      }
    }
  }

  handleClickOutside(event) {
    // Если кликнули вне элемента контроллера — скрываем результаты
    if (!this.element.contains(event.target)) {
      this.hideResults(event);
    }
  }
}