Modal closes if clicked inside and release mouse outside - javascript

Im having an issue with modal in React. The problem is Modal closes if I click inside content and move mouse and release outside. This shouldnt happen.
Currently it works fine because if I click outside content the modal closes, but if I click inside, the modal stays.
But dragging mouse click from inside to outside closes it...
https://codesandbox.io/s/awesome-newton-fqe6b
Looking for help! Thanks!

I do experience the behavior you're describing. Pretty weird, I was under the impression that e.target in this instance would always refer to the interior div if the click event was initiated on that element, but maybe that's not accurate. I tried using stopPropagation(), but it doesn't work because the click event seems to completely ignore the element that the mousedown portion of the click was actually initiated on.
I made a hacky workaround that will save the initial target in the state for comparison with the currentTarget and achieve the effect you're looking for, but this definitely bears some looking in to.

Related

ionicModal disabling click-events

Ionic/cordova/angular/ios application:
I am using angular-notify to display overlay messages that have ng-click events attached. They show up fine and the ng-click events register EXCEPT when an ionicModal is open - while it's open and an angular-notify message displays, I can't click it. As soon as I click to close the modal (I have to click on my notification since it is overlaying the close button but it still closes the modal) the ng-click registers again.
I am not sure how to test this theory, but it feels like the click is getting captured or disabled by ionicModal. Is there something I can do (z-index is set to 99999) to make those clicks get registered?
-- UPDATE (Testing in Chrome w/inspector)
It doesn't appear to matter in which order the elements are loaded. Whether the modal, notification overlay or popup load in first, the issue remains.
Click events are cut off for my notification overlay until the modal and/or popup are dismissed.
When I look at the DOM inspector, I see some divs are created when the popup or modal instantiates. This one:
<div class="click-block click-block-hide"></div>
looks like it might be causing my issues but it sits lower in the DOM and when I delete the element (in Chrome Inspector) it doesn't fix my issue.
No matter what z-index I set or where I move the element in the DOM (via inspector) or what background div elements I delete, I still cant click my notification until any and all popup/modals are dismissed.
Any thoughts?
Can you explain the layout a bit better? Is the ionicModal sitting on top of the message? Or are they side by side?
If the modal is sitting above the message, then it is a matter of z-index. You need to make sure that the z-index for the class that is being used isn't overriding the z-index of 99999.
I figured it out, at least how to hack around it.
$ionicModal and $ionicPopup add a class to the body element <body class='popup-open modal-open'>. I didn't look into how, but it is blocking clicks to my notification.
So I added an interval to the angular-notify notification to remove the modal-open and popup-open classes from $ionicBody.
var notificationInterval;
notificationInterval = $interval(function() {
$ionicBody.removeClass('modal-open');
$ionicBody.removeClass('popup-open');
// console.log("removing those body classes while the notification is up.");
}, 1000)
For notification dismissal, I added to the $scope.$close function
$interval.cancel(notificationInterval)

Detect click outside div doesn't work if click target is iframe

I've got dialog that I wrote and it closes when clicking outside (no overlay/backdrop).
It works nicely unless there's an iframe, in which case my listener on outside clicks is never called.
Here is a JSBIN to illustrate the problem. (http://jsbin.com/vuneyopedu/edit?js,console,output)
To briefly explain in the below screenshot:
Clicking RED Dialog Increments.
Clicking Outside Dialog (YELLOW and GREEN) should Decrement but only YELLOW works.
The event listener for outside clicks is never called when clicking iframe (GREEN)
Question is - How do I make clicking anything outside the RED square (specifically clicking the iframe) decrement the number. (or close the dialog, in the "real" world)
How about binding event to iframes' document.
iframes = document.getElementsByTagName('iframe');
iframesArray = Array.prototype.slice.apply(iframes);
iframesArray.forEach(function(frame) {
frame.contentWindow.document.addEventListener('click', function() {
inc();
}, true);
});
The correct approach here is to use a modal and one of the strongest use-cases for the modal. By design modals prevent clicks from falling through to elements below hence there is no need to handle side effects like your iframe issue or e.stopPropagation() or anything else. It also makes positioning very clean.
As a side note, the currently accepted answer is a very poor approach since it relies on adding an event handler inside the iFrame, then binding that onto the parent container window. This is wrong on many levels: no separation of concerns, iframe from different domains will be blocked due to CORS, iframe will register with any and all parents even when not needed, etc.

Bootstrap Modal-related Memory Leak?

Please understand that it will be difficult for me to post snippets of code, but the problem is easy to summarize.
A modal becomes visible.
I click anywhere OUTSIDE of the modal (we are still in the modal here, and experiencing zero lag).
The modal is closed.
Suddenly everything is very laggy, until I click on any element that IS NOT bound to a .click listener, after which the lag is completely gone.
Because of step #4, it seems to behave similarly to a recursive function. When I finally click on something not listening for a click, it returns all the way back up and all is well. Until then, I just burrow deeper into the rabbit hole.
Notes:
This applies to all modals in the DOM.
If a modal is closed using ESC or the 'Close' button, there is no lag. The issue only arises when I click outside of the modal.
I'm not dynamically creating anything here, not even the modals, so I don't have a straightforward idea of why memory usage would be increasing.
There is never more than one modal open at a time (tested via extensive logging).
I happen to have 'data-background="static"' set so that the modals don't auto-close when you click outside of them, but this doesn't have any effect on the issue. With or without it, the same issue crops up.

Simulate a document.body click event

I am having a big of an issue.
I have some third party js includes and they popup some info on a button click, that is in an iframe. Of course, I don't have access to this iframe. But the 3rd party captures clicks and closes the iframe popup. So the behaviour is like so -
I am a user, I click on this "3rd party button, an iframe popups up anchored bottom right". Now, if click anywhere on the main parent page (my page), the iframe closes.
Here is the problem. I have some custom form fields/spans etc.... in which I capture the clicks before they bubble up so the document.body never get that "click".
How can I fake this out? I tried "mousedown" and that seems to propagate up. So I then said something like:
jQuery(document.body).mousedown(function(){
jQuery(document.body).click();
})
so, no matter what is mousedown, I try to say there is a click happening. BUT that doesn't work. Not sure why? If I attach that click onto a div and alert - it alerts, but perhaps "natively" it isn't the same.
Any ideas of to truly simulate a body click event when/if the element clicked on has had its native clicked event captures before it can bubble up?
EDIT: I have tried various things.
ie:
<div id="captureclick"></div>
<script>
jQuery(document.body).mousedown(function(){
jQuery("#captureclick").click();
})
</script>
I also tried:
jQuery's trigger function trigger('click');
Not working. I haven't tried using a button as the "click traget", yet.
Thanks.

Is there a way to "reset" mobile Webkit's pseudo-hover behaviour after the initial hover-triggering click?

I'm working on a website where I'm using Javascript (via JQuery) to add pop-up boxes containing extra information for items in a list. I'm using JQuery's mouseeneter and mouseleave events to make the popups appear and disappear which of course all works fine in desktop browsers.
In Mobile Safari the popup appears when I click an item (which is what I expect and what I want to happen) and I have added an ontouchstart which triggers the mouseleave JQuery event thus hiding any visible pop-up when the user does anything else. This works fine too except that when a user taps an item the pop-up of which they've just looked at and cancelled (either by scrolling or by doing anything else that triggers the ontouchstart event), rather than it showing the pop-up again it activates the link attached to that item.
If a user were to tap another item instead of tapping the same item again then that new item's pop-up would show and then if they were to tap the first item again then that item's pop-up would show. Again, this is both expected and what I want to happen.
It would seem that once an item with a hover event has been tapped and Mobile Safari as been forced to make that event happen, that item is then flagged as having had its hover event triggered and so the next tap doesn't have to pretend to be a hover, it can be a normal click. Tapping another item with a hover event seems to "reset" the flag set for the previous item.
I'd like to be able to 'reset' this flag for myself so that, rather than how things work currently where clicking an item shows the pop-up and the next click on that item, even if the pop-up has been closed, will activate the link, instead when I close the pop-up with my ontouchstart, and so to my mind the item is no longer being "hovered over", a second click on that same item should show the pop-up again and then only by clicking on the item whilst the pop-up is visible should the link activate.
The secret would seem to be in getting Mobile Safari to exit its "pseudo-hover" mode when I use ontouchstart to trigger mouseleave but I have been unable to find anything useful anywhere on exactly what's going on when Mobile Safari pretends to hover over anything and whether any of this is accessible via Javascript events.
I know I could write a version of my pop-up code to work specifically for Mobile Safari but it seems much more efficient to me to get the browser to do most of the hard work of mimicking hover events. If only I could get this final little niggle sorted out.
I'm guessing the hover state is tied into which element has focus rather than as a flag. One tap gives focus, second tap activates the link.
Try closing the pop-up by giving another element focus, and see if that works out any better.
$('body').focus();
tl;dr but try this:
# :hover fix
# e.g.: body:not(.stoppedhovering) .styled:hover
hoverFix = ->
window.clearTimeout hoverFix.delay if hoverFix.delay?
$('body').removeClass 'stoppedhovering'
delayed = -> $('body').addClass 'stoppedhovering'
hoverFix.delay = _.delay delayed, 600
$('*').live 'touchstart', hoverFix

Categories