useClickOutside not work Submit form button

[nikolaokonesh]

useClickOutside not work Submit form button why?

[divagueame]

Hi nikolaokonesh,
I could not reproduce that behaviour, it seems to work on my side. Could you provide an example?

I tried this:

import { Controller } from "@hotwired/stimulus"
import { useClickOutside } from 'stimulus-use'

// Connects to data-controller="outside"
export default class extends Controller {
  connect() {
    useClickOutside(this)
  }
  clickOutside(event) {
    console.log("Clicked outside", event.target)
  }
}

<form>
  <input data-controller="outside" type="submit" class="p-12 bg-red-200">
</form>

[nikolaokonesh]

@divagueame

// data-controller="comment-reply"
import { Controller } from "@hotwired/stimulus"
import { useClickOutside } from 'stimulus-use'

export default class extends Controller {
  static targets = [ "form" ]

  connect() {
    useClickOutside(this)
  }

  toggle(event) {
    event.preventDefault()
    this.formTarget.classList.toggle("hidden")
  }

  clickOutside(event) {
    event.preventDefault()
    this.formTarget.classList.add("hidden")
  }
}

<div class="bg-slate-50 mt-4 rounded-b rounded-2xl"  data-controller="comment-reply">
  <%= render partial: "comments/comment", locals: {comment: comment} %>
  <%= link_to 'Reply', "#", data: { action: "click->comment-reply#toggle" }, class: 'flex p-1' %>
  
  <%= render partial: "comments/form", locals: { comment: Comment.new, data: { comment_reply_target: "form" }, class: "hidden" } %>
</div>

not work Submit button

[nikolaokonesh]

@divagueame variants?

[divagueame]

Hi Nikola,

I don't know what could be the issue. It seems it works correctly on my machine. Unfortunately, I could not reproduce the example you have provided, since I don't know what html was generated from that code. I tried briefly once again, and I could something work similar to your example like that:

instead of:
<%= render partial: "comments/form", locals: { comment: Comment.new, data: { comment_reply_target: "form" }, class: "hidden" } %>

I did something like this:
<%= render "form", post: @post, locals: { comment: @postComment.new }, data: { data_outside_target: "form" } %>

Notice the data in render is not inside the locals. That would be my first guess without having the full picture.

If you could describe a bit better what exactly is not working, that could be helpful to give you a hand. Just 'not work Submit button' is not clear enough to me. It would be helpful to know what behaviour you are experiencing and what html is being rendered.

[nikolaokonesh]

This example nested comments
https://github.com/gorails-screencasts/hotwire-realtime-nested-comments.git

// app/javascript/controllers/comment_reply_controller.js

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "form" ]

  toggle(event) {
    event.preventDefault()
    this.formTarget.classList.toggle("d-none")
  }
}

// app/views/comments/_comment_with_replies.html.erb

<%= turbo_stream_from comment, :comments %>

<div class="pl-3 border-left" id="<%= dom_id(comment) %>_with_comments" data-controller="comment-reply">
  <%= render comment %>

  <div class="text-sm">
    <%= link_to "Reply", "#", data: { action: "click->comment-reply#toggle" } %>
  </div>

  <div id="<%= dom_id(comment) %>_comments">
    <%= render partial: "comments/form", locals: { commentable: comment, comment: Comment.new, data: { comment_reply_target: "form" }, class: "d-none" } %>
    <%= render partial: "comments/comment_with_replies", collection: comment.comments, as: :comment %>
  </div>
</div>

Please how add useClickOutside
not work Submit button after open form.
I speak English very poorly... Sorry.
I use a hidden form for replying to a comment in my application, the form opens by clicking “Reply”, after opening the hidden form the “Submit” button does not respond to clicks, the comment cannot be sent. And this problem appears when I try to connect useClickOutside to hide the form when I click on another place.
Please Help!

[nfilzi]

@nikolaokonesh try removing the event.preventDefault() from your toggle(event) function?

Your controller would look like this then:

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "form" ]

  toggle(event) {
    this.formTarget.classList.toggle("d-none")
  }
}