I use variations of <CardActionArea onClick={someFunction}> throughout my React app, and I've come across an instance where clicking the card does not fire the onClick function. This is only when the component is rendered in a certain tree, in all other parts of the app it works as expected. I'm using in Algolia's react-instantsearch-dom component in my component that's giving the issue.
The ripple effect (the animation that shows the user clicked the card) fires in every situation. So it doesn't seem to be something as simple as a transparent div overlaying the card. Below is a working component tree compared to the one with the issue:
working
click does nothing
One odd thing you can see above is both CardActionArea components show an empty onClick. But the function still works in most cases.
I'm using onClick={() => console.log('click')} to test, so it doesn't appear to be an issue with the function itself. Any ideas on what could prevent the onClick even from firing, or suggestions for troubleshooting would be appreciated.
Edit: This issue doesn't happen in iOS Safari, but it does occur in Firefox.
Edit 2: Since I don't understand this well enough to reproduce it, and it doesn't appear to be something obvious in the code, I'm looking for troubleshooting advice. Is there something in Chrome's developer tools I can use to trace this behavior?
The issue was the anonymous component between Article and CommentEditor. The component was rendered into a Dialog conditionally, and removing the condition so that it always rendered when the Dialog was open fixed the issue.
Related
So we have a primereact components based app,
and the problem occurs when triggering the show of an overlay component
(usually a Dialog, but I've noticed it could also happen with Sidebar),
in a specific page that concerns with showing a table and the basic crud associated with it,
we show the form to create/update inside a Dialog,
when clicking the appropriate button the dialog shows..
only sometimes the dialog crashes and this error shows:
this have been happening for a very long time, and there were many attempts,
not even to fix it, but just to get the bug re-produced consistently.
couldnt do it...
of course tried finding a setState that could get stuck in a loop
any help would be appreciated :)
Material UI is documentation is unarguably most close to perfect open source project docs for react developers but there are some unclear things like exact difference between Popover and Popper. Can someone explain me in short what is the core difference between this two ??
As it's explained in the doc :
Popover
Things to know when using the Popover component:
The component is built on top of the Modal component. The scroll and
click away are blocked unlike with the Popper component.
Popper
Clicking away does not hide the Popper component. If you need this
behavior, you can use ClickAwayListener - see the example in the menu
documentation section.
A PopOver behaves more like a modal, blocking user action/scroll until it is dismissed with a click outside of itself.
Popper is just a thing that pops, doesn't impose anything upon the user, and doesn't disappear by default if you click away, so it's less intrusive to the user experience.
I'm creating a third-party app, which is loaded through an iframe.
The iframe creates a draggable element in side it.
On first page load (before scrolling the page), the draggable (slider) works fine.
But after scrolling the page behind the iframe, it's hard to get the slider to slide again.
(Note that this is a mobile issue, safari on iOS especially, but also chrome on iOS)
In the following demo I have used the GSAP Draggable library with react to create the draggable element but have also tried to code it in plain react with no luck.
Here is a demo: https://unfjl.csb.app/
I have tried a lot of different things (css, touchevents etc), but cannot get it to work...
What could cause this behaviour?
Update (no iframe example)
Demo no iframe: https://p5cu9.csb.app/
Same example with slider as above, but in this example the draggable is rendered directly in the DOM and not in an iframe. The problem still occurs. I suspect it has something to do with the fixed css position of the slider...
This is gonna sound really strange, but a bug in iOS Safari causes that and the only way I know of to get around it (which I discovered today via Googling) is to add a "touchstart" listener to the of the top-level page (not the iframe)!
document.getElementsByTagName("body")[0].addEventListener("touchstart",function(){});
That isn't something I can add to Draggable because it wouldn't be able to access the parent document (outside the iframe) to add that properly (security restrictions in the browser).
You could also add a touchforcechange listener that prevents the default behavior (I'll be adding that to Draggable itself too):
yourDraggableElement.addEventListener("touchforcechange", function(event) {
event.preventDefault();
});
Browser bugs are fun, aren't they?! ;)
(Originally answered in the GreenSock forums at https://greensock.com/forums/topic/21450-draggable-in-iframe-on-mobile-is-buggy/?tab=comments#comment-101225)
So i am using the react-recaptcha-v3 component in my react app, and it renders an invisible recaptcha on my page. Is there any way to trigger the challenge? I want to see how it would look
I faced a similar problem trying to trigger the captcha. I read somewhere that it uses the movement of the mouse to segregate bot behaviour or not.
Try using the mouse keys on your computer to scroll the page. Use Left-Alt + Left-Shift + NumLock to move the mouse and scroll a few times. This should trigger the image reCaptcha test. It worked for me.
Hope this helps !
I have a Material-UI <Dialog> element that has worked perfectly for a long time, including in Chrome using device emulation. Recently I noticed that for some reason, when using device emulation in Chrome, the dialog opens, and then immediately closes. The same thing is happening with my <Drawer> element. Looking at the call stack, I can see a topClick event is triggering dispatchEvent and is closing the elements -- even though I've clicked nothing except the UI element that opens the Dialog or Drawer.
When I am not using device emulation, everything runs as expected.
The same anomaly is seen when I access the web app from my iPhone. I have updated to the latest versions of all my React plugins, including react-tap-event-plugin, but the anomaly is still here.
What could be causing this?
Thanks very much in advance to all for any info!
Material-UI has dropped its dependency on react-tap-event-plugin. It now uses onClick instead of onTouchTap.