Next.js Discord

Discord Forum

Problem with react-datepicker component

Unanswered
Transvaal lion posted this in #help-forum
Open in Discord
Transvaal lionOP
Hi guys, I made a custom header for my datepicker component so I could select other months and years. but every time I click on a month the whole datepicker closes and I don't know why, I tried using a select and dropdown components. but it did not work, does someone know how to handle this? thankss!!

17 Replies

Atlantic horse mackerel
Helloo - do you have some state managing wether the component is open such as setCalendarOpen() ? It could be getting updated somewhere - feel free to drop a repo link and I can take a look
Transvaal lionOP
sorry the repo is private, but I'll send the calendar code
@Transvaal lion Click to see attachment
for onPress, accept argument e then try running e.stopPropogation()
Transvaal lionOP
I tried, but the popover still closes, but thanks
@Transvaal lion I tried, but the popover still closes, but thanks
Are you referring to the date popover or month popever
Transvaal lionOP
the date popover, when I open the month popover and click on any button with the month the whole date popover closes and the date does not change
and can you try using onClick instead of onPress, it is more commonly used
Transvaal lionOP
I tried with the normal html button tag, this is a monorepo project and the onPress comes from the Pressable component from react native
I'm a little puzzled like how does react-native relate to a nextjs(react) project?
Transvaal lionOP
sorry, its a monorepo project, its mobile and web and there is a lot of shared code to speed up the development on both platforms. for mobile we use react native and web it is next js, some parts of the code are html specific for web but there is a lot of reused components to keep the same look on both platforms and code faster
Ahh got it
It is a good idea to use your browser devtools, they help a lot in fixing these types of issue
I've faced a similar error before when configuring recaptcha + sheet together, and faced issues like sheet were closing when using Recaptcha.

Devtools helped me narrow down the issue,
and also console.log when each button is clicked, to determine the root cause
I can just fix it if you can provide a codesandbox link, with just this example
Transvaal lionOP
yeah, I did some console logs, but when the button is clicked, it closes before firing the onClick method