Comments (5)
awesome! thanks @TheSharpieOne Your fix and thorough response actually made me lookup more info on event bubbling and capturing.
from reactstrap.
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.
from reactstrap.
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).
from reactstrap.
Looks like it fixes the issue, tested locally. A PR is up for review.
from reactstrap.
Fix published in 3.0.1
from reactstrap.
Related Issues (20)
- Offcanvas example code not working HOT 1
- Dropdown component throws error if used with inNavbar property HOT 4
- DropdownItem looses menuitem role when disabled HOT 1
- Enhancement Request - ModalTitle component
- Tooltip arrows are not visible with Bootstrap 5.3.0 HOT 1
- [deps] Checking for breaking changes in Dependabot's PRs
- Problem to centralize CarouselCaption
- Shift+Tab Model with ShadowRoot
- Carousel: switching interval to false does not deactivate autoplay directly
- Padding issue when closing a modal and opening another at the same time
- FormGroup combined with InputGroup doesn't render properly due to mis-placed class name 'mb-3' HOT 1
- Preventing scroll is not working for nested Offcanvas
- Due to the type definition, UncontrolledAccordion cannot be used without toggle HOT 1
- ReactStrap Navbar is not printed to default pdf printer pf browsers
- Dropdown not working witn Reactstrap v8 and Bootstrap v4 HOT 1
- Use useId() hook in Popover
- It won't accept floating numbers when I add the minimum and maximum number limits. HOT 1
- How do buttons get form data outside the form and go to validation? HOT 1
- Can't use `Button` without event handlers in Server Components HOT 1
- Unable to customise scrollbar of reactstrap table 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 reactstrap.