The button click was not recorded in Next.js due to an issue with shad

Hey there, I am currently working on a project where a button click triggers a request to the backend and executes a function on the frontend. In my code, I am using the default Shadowcn button with an onClick event. Everything works smoothly when I run the code on localhost on my PC. But, when I host it on Vercel and open it on my iPhone, the button doesn't always work properly. Sometimes I have to click the button once for the function to run, other times I need to click it up to 10 times. Does anyone have a solution for this issue?

Here is the code snippet, the button in question is the "Print label" button.


        [insert your modified code here]
typescriptnext.jsshadcnui

Answer №1

I'm facing a similar issue with a shadcn Button in a Dialog that doesn't have a Form. I can't seem to connect the button click event handler using the usual method, like adding the addClick / addClickCapture attribute to the Button element.

Fortunately, I already had a reference to the Button. I utilized this reference in my table's RowSelectedEvent handler to toggle the Button's enable/disable state.

Here are the two components in my dialog (the inline onClick (or onClickCapture) handler not functioning as expected):

<div className={cn("flex justify-end")}>
     <Button ref={ref} disabled={!projectSelected}  onClick={()=>console.log("confirmed")}>Confirm selection</Button>
</div>
<SingleSelectionProjectTableWithAgGrid fetcher={projectsFetcher} rowSelectionHandler={onSelectionChange} />

To address this issue, I implemented a workaround in the rowSelectionHandler:

const ref = React.useRef<HTMLButtonElement>(null)
const [projectId, setProjectId] = React.useState<string>()
const onSelectionChange = (evt) => {
    if (ref.current) {
        setProjectId(evt.data["id"])
        ref.current.disabled = !evt.node.selected
        ref.current.onclick = () => console.log("Comfirm button clicked")
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with login form in IONIC: Form only functions after page is refreshed

Encountering an issue with my Ionic login form where the submit button gets disabled due to invalid form even when it's not, or sometimes displays a console error stating form is invalid along with null inputs. This problem seems to have surfaced afte ...

htmlangularformstypescriptionic-framework

There is no universal best common type that can cover all return expressions

While implementing Collection2 in my angular2-meteor project, I noticed that the code snippets from the demo on GitHub always result in a warning message being displayed in the terminal: "No best common type exists among return expressions." Is there a ...

meteortypescriptangularmeteor-collection2angular2-meteor

Using Angular 10 to make an HTTP POST request, with the goal of appending a string

Whenever I try to send a post request to an api endpoint, I keep encountering an error with status code 500. name: "HttpErrorResponse" ok: false status: 500 statusText: "Internal Server Error" Below is the code I am using: var selected ...

javascriptangulartypescripthttppost

The class constructor fails to run when a function belonging to that class is passed as an argument to the express

In one of my Express middleware files, there is a function that calls a new instance of OrderController and utilizes the createOrder method. import { Router } from "express"; import { OrderController } from "../../controller/orders.controlle ...

javascripttypescriptexpress

Exploring intricate JSON data in Angular 4 applications

Below is the json structure I have: [ { "section":{ "secName":"Module 1", "pages":[ { "pageName":"Page 1", "pageType":"brightcove", "pageData":[ { ...

angulartypescript

Webpack is mistakenly looking in the incorrect subfolder when attempting a relative import

I have set up a Vue application (version 3 with TypeScript) within a directory structure where the Vue app is nested inside a directory named /my-vue-app. In the same directory, there is a folder containing my Node.js server code (not TypeScript) that I am ...

typescriptvue.jswebpackimportvuejs3

How to best handle dispatching two async thunk actions in Redux Toolkit when using TypeScript?

A recent challenge arose when attempting to utilize two different versions of an API. The approach involved checking for a 404 error with version v2, and if found, falling back to version v1. The plan was to create separate async thunk actions for each ver ...

javascriptreactjstypescriptreduxredux-toolkit

Jest unit tests in Angular using Typescript are not detecting failures when it comes to console errors or unrecognized elements

In my Angular Typescript project, I am facing an issue with my Jest unit test. The test does not fail even if a component (e.g., mat-paginator without importing MatPaginatorModule in configureTestingModule) or template bindings (e.g., [mask] directive from ...

angulartypescriptunit-testingtestingts-jest

What is the best way to pre-load a session using NextAuth on the main page of my Next.js 14 application with an

I am working on a route '/' and I want to utilize the useSession() hook in next auth to retrieve the session. However, there is a delay in fetching the session data, resulting in the initial render displaying without the user's session. Is t ...

reactjsnext.js

Send properties to the component container

I am currently working on a higher order component that toggles between two children - a component that renders data and a loading component. The challenge I am facing is how to pass the loading state from the data component to the HOC for conditional rend ...

reactjstypescriptreact-nativemobx-react

How can the default Head be set for all pages in NextJS?

Is it possible to establish a default value for the Head component in NextJS that can be inherited by other pages? For my specific scenario, I need to ensure that a particular font is loaded on every page: <Head> <link href="path-to-fo ...

next.js

Tips on injecting configuration into forRoot

Is there a method to inject configuration object into AppModule's forRoot() function? How can I access the configService if there is no constructor within the module? config.yml: smtp: host: 'smtp.host.com' port: 10 secure: true aut ...

node.jstypescriptyamlconfignestjs

Uploading a server-side rendered application with NextJS to my FTP account: A step-by-step guide

Thank you so much for all your assistance. I really appreciate how create-react-app makes it easy to run NPM RUN BUILD and then transfer the "Build" folder to your FTP directory. I'm curious, how does this work with NextJS? After building my app and ...

reactjsnext.jsnpm-runnext-routergetserversideprops

How can I dynamically load a single server component in a NextJs 14 App Router?

Is it possible to statically render a page with a server component that loads on demand? In this scenario, I want the Home page to be rendered statically during build time for cached document requests, while keeping the ServerComponent dynamic and loaded ...

next.jsnextjs-dynamic-routingnextjs14

Pause the React rendering process to initiate a redirection

Currently, I am developing a React application using Next.js and facing a specific challenge that requires a solution: There are certain pages in my application that should only be accessible once a particular context has been established. To achieve this ...

reactjsnext.js

What practical applications exist for preserving JSX post-transpilation of a tsx file?

While troubleshooting another issue, I decided to delve into Typescript's documentation on JSX usage. I discovered that some options involve converting JSX while others do not. I am puzzled as to why one would need to preserve JSX in transpiled file ...

typescriptjsx

Server Error: Experiencing an overload of renders. React has set limits on the number of renders to avoid getting caught in an endless loop

I am currently attempting to develop a basic stopwatch application and encountering the following error message. Despite trying various solutions from similar queries, I have not been able to pinpoint the root cause of this issue or resolve it. Below is t ...

javascriptreactjsnext.js

Leverage the useParams data to serve as a state object key in the useSelector function using TypeScript

Looking to access state data using a key obtained from useParams? Here's an example: export const MainPageSection = (props:MainPageSectionPropsType) => { const params = useParams(); const currentSection = params.section const excursions ...

reactjstypescriptreduxreact-router

Creating a velocity gauge style graph in Angular 4: A step-by-step guide

Hello, I'm currently working on building a speedtest-inspired application. While everything else is going smoothly, I'm struggling to incorporate a speedometer-like chart in Angular 2/4. Despite searching extensively, I've only come across J ...

angulartypescript

What is the best way to refresh or reload a child component in Angular?

I have a transaction.component.html file that displays the app-deal-partners component. Every time the delete function is triggered, I want to refresh and reload the child component, which is the app-deal-partners component. I need to reload <app-deal- ...

angulartypescript