Submitting Rails form through stimulus controller after using append_to_body - Stack Overflow

I used append_to_body to avaoid filter dropdowns overlape eachother, but now the option list items are not send hitting request to submit the form in stimulus controller in rails, can anyone help me with this?

def popover_arguments
    {
      sectioned: @sectioned,
      style: ("width: #{@width}" if @width.present?),
      position: :below,
      alignment: :left,
      append_to_body: true,
    }
  end

above is the popover arguments definition in filters_component file, the popover thing is working just fine, but due to this, the form is not submitting.

- layout.section do
  = polaris_card() do |card|
    - card.section() do
      - search_config = {controller:"search", action: "input->search#submit", turbo_frame: 'search_results', turbo_action: 'advance'}
      = search_form_for @q, url:property_unit_financials_path(unit.property, unit), html:{ data: search_config} do |f|
        = polaris_filters do |filters|
          - filters.query( name: "q[id_eq]", placeholder: t("Filter Invoice By ID"), value: @q.id_eq)
          - filters.item(label: t("Type"), sectioned: false, width: "150px") do
            = polaris_option_list(title_hidden: true) do |list|
              - list.radio_button(label: t("All"), value: "", name: "q[account_type_eq]", checked: @q.account_type_eq.blank?)
              - list.radio_button(label: t("Equity"), value: "Equity", name: "q[account_type_eq]", checked: @q.account_type_eq == "Equity")
              - list.radio_button(label: t("Expense"), value: "Expense", name: "q[account_type_eq]", checked: @q.account_type_eq == "Expense")
              - list.radio_button(label: t("Income"), value: "Income", name: "q[account_type_eq]", checked: @q.account_type_eq == "Income")
              - list.radio_button(label: t("Asset"), value: "Asset", name: "q[account_type_eq]", checked: @q.account_type_eq == "Asset")
              - list.radio_button(label: t("Liability"), value: "Liability", name: "q[account_type_eq]", checked: @q.account_type_eq == "Liability")

and the here is the stimulus controller

import { Controller } from "@hotwired/stimulus";
import { useDebounce } from "stimulus-use";

  export default class extends Controller {
   static debounces = ["submit"];
   connect() {
   useDebounce(this, { wait: 300 });
  }

  submit() {
     this.element.requestSubmit();
  }
}

below here is the image, in which this dropdown's list is not requesting for submission.

png

I used append_to_body to avaoid filter dropdowns overlape eachother, but now the option list items are not send hitting request to submit the form in stimulus controller in rails, can anyone help me with this?

def popover_arguments
    {
      sectioned: @sectioned,
      style: ("width: #{@width}" if @width.present?),
      position: :below,
      alignment: :left,
      append_to_body: true,
    }
  end

above is the popover arguments definition in filters_component file, the popover thing is working just fine, but due to this, the form is not submitting.

- layout.section do
  = polaris_card() do |card|
    - card.section() do
      - search_config = {controller:"search", action: "input->search#submit", turbo_frame: 'search_results', turbo_action: 'advance'}
      = search_form_for @q, url:property_unit_financials_path(unit.property, unit), html:{ data: search_config} do |f|
        = polaris_filters do |filters|
          - filters.query( name: "q[id_eq]", placeholder: t("Filter Invoice By ID"), value: @q.id_eq)
          - filters.item(label: t("Type"), sectioned: false, width: "150px") do
            = polaris_option_list(title_hidden: true) do |list|
              - list.radio_button(label: t("All"), value: "", name: "q[account_type_eq]", checked: @q.account_type_eq.blank?)
              - list.radio_button(label: t("Equity"), value: "Equity", name: "q[account_type_eq]", checked: @q.account_type_eq == "Equity")
              - list.radio_button(label: t("Expense"), value: "Expense", name: "q[account_type_eq]", checked: @q.account_type_eq == "Expense")
              - list.radio_button(label: t("Income"), value: "Income", name: "q[account_type_eq]", checked: @q.account_type_eq == "Income")
              - list.radio_button(label: t("Asset"), value: "Asset", name: "q[account_type_eq]", checked: @q.account_type_eq == "Asset")
              - list.radio_button(label: t("Liability"), value: "Liability", name: "q[account_type_eq]", checked: @q.account_type_eq == "Liability")

and the here is the stimulus controller

import { Controller } from "@hotwired/stimulus";
import { useDebounce } from "stimulus-use";

  export default class extends Controller {
   static debounces = ["submit"];
   connect() {
   useDebounce(this, { wait: 300 });
  }

  submit() {
     this.element.requestSubmit();
  }
}

below here is the image, in which this dropdown's list is not requesting for submission.

png

• ruby-on-rails
• forms
• append
• stimulus-rails

Share Improve this question Follow edited Jan 16 at 13:49 Muhammad Zubair asked Jan 16 at 13:37 Muhammad ZubairMuhammad Zubair 111 bronze badge 1

• Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Michael W. Commented Jan 16 at 20:44

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

It is not very clear, how you set up everything, but maybe it is just a minor issue:

You are trying to do this.element.requestSubmit, the form is not submitting anything after a change of the filter. I am not familiar with "Polaris", but it looks like you are using radio buttons....

maybe you can try to change the code to listen for events when the selected radio changed?

export default class extends Controller {
  connect() {
    // here we start and attach the "change" event listener...
    this.element.querySelectorAll("input[type='radio']").forEach((radio) => {
      radio.addEventListener("change", this.submit.bind(this));
    });
  }

  disconnect() {
    // after the page is left, we "un-listen"
    this.element.querySelectorAll("input[type='radio']").forEach((radio) => {
      radio.removeEventListener("change", this.submit.bind(this));
    });
  }

  submit() {
    this.element.requestSubmit();
  }
}