Button not working on mobile devices only.
Unanswered
Manx posted this in #help-forum
ManxOP
"use client";
import * as React from "react";
export function CountryTest() {
const [open, setOpen] = React.useState(false);
return (
<div className="p-4">
{/* TEST BUTTON /}
<button
type="button"
onClick={() => {
console.log("CLICK WORKS");
setOpen((v) => !v);
}}
className="
px-4 py-2
border rounded-md
bg-white
text-sm
touch-manipulation
"
>
Toggle Open: {open ? "OPEN" : "CLOSED"}
</button>
{/ VISUAL STATE */}
<div className="mt-4 text-sm">
State: {open ? "OPEN" : "CLOSED"}
</div>
</div>
);
}
import * as React from "react";
export function CountryTest() {
const [open, setOpen] = React.useState(false);
return (
<div className="p-4">
{/* TEST BUTTON /}
<button
type="button"
onClick={() => {
console.log("CLICK WORKS");
setOpen((v) => !v);
}}
className="
px-4 py-2
border rounded-md
bg-white
text-sm
touch-manipulation
"
>
Toggle Open: {open ? "OPEN" : "CLOSED"}
</button>
{/ VISUAL STATE */}
<div className="mt-4 text-sm">
State: {open ? "OPEN" : "CLOSED"}
</div>
</div>
);
}
13 Replies
ManxOP
I am using this component in another client component called contact-form, then using the contact form in the main app/page.tsx. the button works just find on desktop but not on mobile devices, i tested it on android and on ios but it just doen't work
@Manx I am using this component in another client component called contact-form, then using the contact form in the main app/page.tsx. the button works just find on desktop but not on mobile devices, i tested it on android and on ios but it just doen't work
I just tested it, but I couldnt reproduce your issue. Can you provide a reproduction for example via https://codepen.io/
ManxOP
I am developing my project using next js, CodePen doen'st support that enviorment
Can you join a call, and ill share the screen with you?
@B33fb0n3 I just tested it, but I couldnt reproduce your issue. Can you provide a reproduction for example via https://codepen.io/
ManxOP
If you want i could also upload and share a git hub repo
@Manx If you want i could also upload and share a git hub repo
yea, that would work. https://codesandbox.io/dashboard is also a good alternative
@B33fb0n3 yea, that would work. https://codesandbox.io/dashboard is also a good alternative
ManxOP
okay ill do that now
@Manx https://github.com/walidikw/landing-page here is the repo
I tried to setup your project, but I receive an error message. Can you fix it. You can edit my code: https://codesandbox.io/p/github/walidikw/landing-page/main
@B33fb0n3 I tried to setup your project, but I receive an error message. Can you fix it. You can edit my code: https://codesandbox.io/p/github/walidikw/landing-page/main
ManxOP
The problem should have went away, it was a missing image, i just removed it
ManxOP
I have to hop off for the day but ill follow up tomorrow, i appreciate all your effort.
It looks like there is an image above the button and thats why it does not toggle. Suprisingly also on desktop my test component didn't trigger the onclick at all... If 16.2.7 is the latest stable, then its fine, else upgrade. It does not look like its style based (for example pointer-events-none), so that should be fine.
So: remove the image and test
So: remove the image and test