Semi nested Controllers

1

Hi,

I have pretty much an identical select_controller as is shown by the end of this video: Dynamic Select Fields in Rails using Hotwire - YouTube

I basically need this to work but two levels deep. But also I need it to be able to work just the regular single level deep.

I realise that controllers can be nested but cannot access stuff inside nested controllers. My markup is below and i think the above constraint is causing the failure.

Any idea to how i can get this to work flexibly from one level to 2 levels to potentially three levels deep?

            <div data-controller="select" data-select-url-value="/manufacturers/models" data-select-param-value="manufacturer">
                <% f.label :manufacturer, "Filter by manufacturer" %>
                <%= f.select :manufacturer,
                    options_for_select(@manufacturers, params[:manufacturer]),
                    { include_blank: 'All manufacturers' },
                    { data: { action: "change->filters#submit change->select#change" }, class: "item-manufacturers filter-item filter-item--select" } %>

                <div data-controller="select" data-select-url-value="/manufacturers/submodels" data-select-param-value="model">
                    <% f.label :model_1, "Filter by Model" %>
                    <%= f.select :model_1,
                        {},
                        { include_blank: 'All models' },
                        { data: { action: "change->filters#submit", "select-target": "select" }, class: "item-models filter-item filter-item--select" } %>

                    <% f.label :model_2, "Filter by Sub model" %>
                    <%= f.select :model_2,
                        {},
                        { include_blank: 'All sub models' },
                        { data: { action: "change->filters#submit", "select-target": "select" }, class: "item-models filter-item filter-item--select" } %>
                </div>
            </div>

import { Controller } from "@hotwired/stimulus";
import { get } from "@rails/request.js";

export default class extends Controller {
  static targets = ["select"]
  static values = {
    url: String,
    param: String
  }

  connect() {
    if (this.selectTarget.id === "") {
      this.selectTarget.id = Math.random().toString(36)
    }
  }

  change(event) {
    let params = new URLSearchParams()
    params.append(this.paramValue, event.target.selectedOptions[0].value)
    params.append("target", this.selectTarget.id)

    get(`${this.urlValue}?${params}`, {
      responseKind: "turbo-stream"
    })
  }
}

Thanks,
Neil