Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

conditional modal footer closes modal #126

Closed
edgji opened this issue Sep 7, 2016 · 5 comments · Fixed by #130
Closed

conditional modal footer closes modal #126

edgji opened this issue Sep 7, 2016 · 5 comments · Fixed by #130
Labels
bug up-for-grabs

Comments

@edgji
Copy link
Contributor

edgji commented Sep 7, 2016 •
edited
Loading

Is there a way to conditionally display/toggle the modal footer without causing the modal to close?

My use case establishes the modal footer as conditional when there are files selected i.e I display buttons to remove files. I'm running into the issue that while I can make the modal footer conditionally appear, the case in which the footer should disappear causes the entire modal to close.

Take a look at the following bin sample, toggle the modal and add a file. When you remove files the entire modal closes.
http://www.webpackbin.com/NkyVH5_jb
@eddywashere
Copy link
Member

Thanks for reporting this issue and providing an example. It should work. I can see it's not. I'll need some time to dig into this or if anyone wants to look into this feel free to comment on here.

@TheSharpieOne
Copy link
Member

TheSharpieOne commented Sep 7, 2016 •
edited
Loading

Figured it out... (took longer to figure out how to edit the webpackbin (my browser window was too small (less than 1280px wide) and I didn't realize the prevented me from editing and doing things...)
The button is removed from the DOM when there are no more files and this line states that if the thing that was clicked is not within the modal to go ahead and close it. Thus, anytime something is clicked in a modal and it triggers it to be removed from the modal, the modal will close.

A possible fix would be to set useCapture to true instead of false on the addEventListener. This should allow the modal to capture the event on the way down, before it triggers other handlers. I'll check this out when I get a chance to see if it works the way I think it will.

For now, a workaround would be to use styles to hide and show the remove button instead of adding it and removing it from the DOM or maybe even stopping the event (having your handler call stopPropagation() on the event).

TheSharpieOne added a commit to TheSharpieOne/reactstrap that referenced this issue Sep 7, 2016
@TheSharpieOne
fix(modal): fix event listener for modal
f1c55ae 
Fixes reactstrap#126
Change the event listeners for click and keyup in modal
to set `useCapture` to true to trigger the handler before
any other handler.
TheSharpieOne added a commit to TheSharpieOne/reactstrap that referenced this issue Sep 7, 2016
@TheSharpieOne
fix(modal): fix event listener for modal
f9b3aaf 
Fixes reactstrap#126
Change the event listeners for click and keyup in modal
to set `useCapture` to true to trigger the handler before
any other handler.
@TheSharpieOne TheSharpieOne mentioned this issue Sep 7, 2016
Merged
@TheSharpieOne
Copy link
Member

Looks like it fixes the issue, tested locally. A PR is up for review.

eddywashere pushed a commit that referenced this issue Sep 8, 2016
@TheSharpieOne @eddywashere
fix(modal): fix event listener for modal (#127)
c778608 
Fixes #126
Change the event listeners for click and keyup in modal
to set `useCapture` to true to trigger the handler before
any other handler.
@eddywashere eddywashere mentioned this issue Sep 8, 2016
Merged
@eddywashere
Copy link
Member

Fix published in 3.0.1

@edgji
Copy link
Contributor Author

edgji commented Sep 8, 2016

awesome! thanks @TheSharpieOne Your fix and thorough response actually made me lookup more info on event bubbling and capturing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug up-for-grabs
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

chore(release): adding 3.0.1 reactstrap/reactstrap
3 participants
@eddywashere @edgji @TheSharpieOne