Comments (6)
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>
from stimulus-use.
// 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
from stimulus-use.
@divagueame variants?
from stimulus-use.
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.
from stimulus-use.
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!
from stimulus-use.
@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")
}
}
from stimulus-use.
Related Issues (20)
- Deprecated Stimulus-1 Syntax HOT 2
- Possible to exclude hotkeys from generated JS? HOT 5
- `useIntersection`: Update docu or differentiate between option-parameters HOT 1
- `useMemo` does not work as described on `get` properties HOT 4
- `useDebounce` sometimes clears event.params HOT 5
- Unexpected console log output HOT 5
- ESLint failure upgrading to 0.52.0 HOT 5
- Version 0.51.2 broke tributejs usage. HOT 8
- Error: Unable to resolve specifier 'stimulus-use/hotkeys' HOT 5
- useMapReduce - feature request HOT 1
- Weird ruby files in 0.51.0 HOT 2
- `useIntersection`: unobserve after triggering `appear` callback HOT 4
- Documentation for `useIntersection` is ahead of published version HOT 1
- `useTransition`: Allow options override from html attributes HOT 3
- `useTransition`: Turbo drive - cannot properly disconnect HOT 1
- Cannot use import statement outside a module HOT 1
- useCookie - Feature request HOT 1
- useClickOutside + useTransition HOT 1
- useTransition: should I put it in initialize() or connect() ? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from stimulus-use.