Getting validateDOMNesting(...): <button> cannot appear as a descendant of <button> error when datepicker modal is oppened on web

[daxazala]

Current behaviour

i am using datepicker modal from react native paper dates and recently updated the libraries with latest versions and then i tried to run the app and noticed below error react-dom.development.js:86 Warning: validateDOMNesting(...): cannot appear as a descendant of . at button at http://localhost:19006/static/js/bundle.js:19090:25 at Pressable (http://localhost:19006/static/js/bundle.js:15866:24) at TouchableRipple (http://localhost:19006/static/js/bundle.js:11421:20) at div at http://localhost:19006/static/js/bundle.js:19090:25 at http://localhost:19006/static/js/bundle.js:25359:90 at http://localhost:19006/static/js/bundle.js:8520:31 at http://localhost:19006/static/js/bundle.js:7453:19 at div at http://localhost:19006/static/js/bundle.js:19090:25

How to reproduce?

you can reproduce the issue by taking the latest version of react native paper dates and run the examples on web and you can see the issue in browser console. 1.clone react native paper dates repo

2. then build the project and run web script under examples folder
3. go to browser where you web app is running and click calendar button as shown in below screenshot and you will be able to see the error in console.

Preview

What have you tried so far?

Your Environment

software	version
react-native	0.72.4
react-native-paper	^5.10.3
react-native-web	0.19.8
node	v18.12.1
npm or yarn	v8.19.3(npm)
expo sdk	^49.0.9

[davidmartinrius]

Hello, same error here in react native web + rn paper. Did you find any solution?

[iM-GeeKy]

PRs are welcome!

[github-actions[bot]]

Hey! Thanks for opening the issue. Can you provide a minimal repro which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible. The easiest way to provide a repro is on snack.expo.dev. If it's not possible to repro it on snack.expo.dev, then you can also provide the repro in a GitHub repository.

[github-actions[bot]]

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

[kebarvid]

Have the same issue. Isn't a repro provided in the first post?

[Martijncvv]

Same problem: "react-native": "0.72.6", "expo": "~49.0.13", "react-native-paper-dates": "^0.19.7",

[github-actions[bot]]

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

[jweihsSF]

The issue still occurs, but I don't have a solution yet.

[RichardLindhout]

Fixed!

[123zarif]

Still getting the error

[123zarif]

Anyone else getting the same error?

[schtiefel]

Yes, still getting the error.

react-native-paper-dates: 0.21.7 react-native-paper: 5.11.0 react-native: 0.72.6 react-native-web: 0.19.9

[yngfoxx]

I have replaced the IconButton with just the Icon component

[RichardLindhout]

Really cool! The icon component did not exist when I created this library :)

[RichardLindhout]

@schtiefel @123zarif the https://github.com/web-ridge/react-native-paper-dates/releases/tag/v0.21.8 by @yngfoxx should fix this issue :)