Buttons are not working as intended with touchscreen - reactjs

I'm just building an application with react JS that should run on a raspberry pi with a touchscreen. I'm running it at chromium in kiosk-mode. The problem is that the buttons are not working 100% as intended. Every few touches, the button will not trigger. It indicates a registered touch with a lightgreyish highlight, but the event is not triggered. Is this a problem with the browser or with react? Does anyone know or can give me advices on how to fix this?

Related

REACT - Scroll to image loaded when component is re-rendered (happens only on IOS)

I've done some research before come here to ask help, but this issue it's so weird that I can barely describe it to find for some help. Well, I coded pagination logic on my own using React. After finishing I've tested it on Windows using chrome, working fine, on Android using chrome and samsung browser, also working fine...but on IOS using both safari and chrome, when moving through pagination, it scrolls to the new image that is loaded breaking the scroll to the top that I implemented, this video sums up everything:
https://www.youtube.com/shorts/o3aDHOvDIto
You can see that everytime I change pagination it jumps to the image and then scroll to the top, after I cycle between all the posts, this behavior stops and the pagination do what I originally intended, scroll to the top after user select position of the pagination.
You can check it by yourself on you ios device (I was using iPhone 13)
https://hosana.dev/blog.html
Also here is my source code
https://github.com/diegodiego1989/hosana.dev-blog
What I'm doing wrong? Thanks in advance.
To be honest I have no idea on why this is happening.

React web app does not work and keeps refreshing on mobile browser

This web App(reactjs) works fine on desktop and tablets.
However, when trying it on mobile browser(like Safari), the progress bar keeps flickering and refreshing like:
Please click to view the gif
I have tried on Safari and Chrome(e.g. iOS12-14 & Android 10-12), all display the same result.
Anyone know why this happened?
Or why the progress bar keeps flickering and refreshing on mobile browsers, but works well on desktop?
Seems like there is an infinity refresh did you checked useEffect / useMemo / Function Call. The only thing that i can do now, is telling you where you can possibly check in your code, but for a better understanding of your problem, should provide more info about your code or more techical information

CefSharp WPF not rendering until resize in a specific PC

I just tried to copy my wpf app repository to another PC and start to test my app.
But in my another pc, cefsharp render very slowly or not render until resize the app window size.
I run my app which has similar Specifications, it work normaly.
Click events are work, but changed screen is not refreshed until resize my wpf app.
Please help me!! I searched every weeks for this problem, but I can't get any answer about my problem.

Material-UI on iPhone: Phantom topClick Events Closing Dialog Element?

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.

CN1: iOS: Showing ToastBar when virtual keyboard is visible

On iOS (ipad pro) I cannot see the ToastBar showing messages, when the virtual keyboard is visible.
However on Android devices the ToastBar is visible in the same szenario.
Is there way to work around this or do I have to use modal dialogs?
I think I see a problem related to that, it seems we don't handle the special case of iOS VKB's correctly.
I made a fix for this which should be there for the coming update of Codename One this weekend.

Resources