Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[bug][docs]: Drawer docs usage section typo which leads to nested buttons #6205

Open
2 tasks done
SneakySensei opened this issue Dec 28, 2024 · 0 comments · May be fixed by #6206
Open
2 tasks done

[bug][docs]: Drawer docs usage section typo which leads to nested buttons #6205

SneakySensei opened this issue Dec 28, 2024 · 0 comments · May be fixed by #6206
Labels
bug Something isn't working

Comments

@SneakySensei
Copy link

SneakySensei commented Dec 28, 2024 •
edited
Loading

Describe the bug

The DrawerClose usage under the Usage section of Drawer docs doesn't specify the asChild prop but uses a nested button as child. This leads to the following error when devs copy the code as-is:

Error: In HTML, <button> cannot be a descendant of <button>.
This will cause a hydration error.

  ...
    <Presence present={true}>
      <FocusScope asChild={true} loop={true} trapped={true} onMountAutoFocus={function onOpenAutoFocus} ...>
        <Primitive.div tabIndex={-1} asChild={true} ref={function} ...>
          <Slot tabIndex={-1} onKeyDown={function FocusScope.useCallback[handleKeyDown]} ref={function}>
            <SlotClone tabIndex={-1} onKeyDown={function FocusScope.useCallback[handleKeyDown]} ref={function}>
              <DismissableLayer role="dialog" id="radix-:R9f..." aria-describedby="radix-:R9f..." ...>
                <Primitive.div role="dialog" id="radix-:R9f..." aria-describedby="radix-:R9f..." ...>
                  <div role="dialog" id="radix-:R9f..." aria-describedby="radix-:R9f..." aria-labelledby="radix-:R9f..." ...>
                    <div>
                    <DrawerHeader>
                    <DrawerFooter>
                      <div className="mt-auto fl...">
                        <button>
                        <DialogClose>
                          <Primitive.button type="button" ref={null} onClick={function handleEvent}>
>                           <button type="button" onClick={function handleEvent} ref={null}>
                              <Button>
>                               <button
>                                 className={"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded..."}
>                               >
      ...

    at createUnhandledError (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/client/components/react-dev-overlay/internal/helpers/console-error.js:27:49)
    at handleClientError (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/client/components/react-dev-overlay/internal/helpers/use-error-handler.js:44:56)
    at console.error (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/client/components/globals/intercept-console-error.js:48:56)
    at validateDOMNesting (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:2495:19)
    at completeWork (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:13699:15)
    at runWithFiberInDEV (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:544:16)
    at completeUnitOfWork (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15200:19)
    at performUnitOfWork (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15081:11)
    at workLoopSync (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14888:41)
    at renderRootSync (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14868:11)
    at performWorkOnRoot (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14351:13)
    at performSyncWorkOnRoot (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15970:7)
    at flushSyncWorkAcrossRoots_impl (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15830:21)
    at processRootScheduleInMicrotask (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15864:7)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15986:13)

It is a minor typo since all the other examples on the page do pass the asChild prop, but this can go unnoticed under non-Next.js codebases and can cause a11y issues.

Affected component/components

Drawer

How to reproduce

  1. Open the attached codesandbox.
  2. Click on 'Open drawer'.
  3. Check the browser logs.

Codesandbox/StackBlitz link

https://codesandbox.io/p/sandbox/537jnq

Logs

Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.
    at button
    at _c (https://537jnq.csb.app/src/Button.tsx:40:5)
    at button
    at eval (https://537jnq.csb.app/node_modules/@radix-ui/react-primitive/dist/index.js:64:13)
    at eval (https://537jnq.csb.app/node_modules/@radix-ui/react-dialog/dist/index.js:313:13)
    at div
    at DrawerFooter (https://537jnq.csb.app/src/Drawer.tsx:83:5)
    at div
    at eval (https://537jnq.csb.app/node_modules/@radix-ui/react-primitive/dist/index.js:64:13)
    at eval (https://537jnq.csb.app/node_modules/@radix-ui/react-dismissable-layer/dist/index.js:62:7)
    at eval (https://537jnq.csb.app/node_modules/@radix-ui/react-slot/dist/index.js:63:11)
    at eval (https://537jnq.csb.app/node_modules/@radix-ui/react-slot/dist/index.js:44:11)
    at eval (https://537jnq.csb.app/node_modules/@radix-ui/react-primitive/dist/index.js:64:13)
    at eval (https://537jnq.csb.app/node_modules/@radix-ui/react-focus-scope/dist/index.js:51:5)
    at eval (https://537jnq.csb.app/node_modules/@radix-ui/react-dialog/dist/index.js:256:13)
    at eval (https://537jnq.csb.app/node_modules/@radix-ui/react-dialog/dist/index.js:182:58)
    at Presence (https://537jnq.csb.app/node_modules/@radix-ui/react-presence/dist/index.js:54:11)
    at eval (https://537jnq.csb.app/node_modules/@radix-ui/react-dialog/dist/index.js:173:64)
    at eval (https://537jnq.csb.app/node_modules/vaul/dist/index.js:1431:78)
    at eval (https://537jnq.csb.app/node_modules/@radix-ui/react-slot/dist/index.js:63:11)
    at eval (https://537jnq.csb.app/node_modules/@radix-ui/react-slot/dist/index.js:44:11)
    at eval (https://537jnq.csb.app/node_modules/@radix-ui/react-primitive/dist/index.js:64:13)
    at eval (https://537jnq.csb.app/node_modules/@radix-ui/react-portal/dist/index.js:47:22)
    at Presence (https://537jnq.csb.app/node_modules/@radix-ui/react-presence/dist/index.js:54:11)
    at Provider (https://537jnq.csb.app/node_modules/@radix-ui/react-context/dist/index.js:64:15)
    at DialogPortal (https://537jnq.csb.app/node_modules/@radix-ui/react-dialog/dist/index.js:136:11)
    at Portal (https://537jnq.csb.app/node_modules/vaul/dist/index.js:1657:21)
    at _c4 (https://537jnq.csb.app/src/Drawer.tsx:50:5)
    at Provider (https://537jnq.csb.app/node_modules/@radix-ui/react-context/dist/index.js:64:15)
    at Dialog (https://537jnq.csb.app/node_modules/@radix-ui/react-dialog/dist/index.js:77:5)
    at Root (https://537jnq.csb.app/node_modules/vaul/dist/index.js:901:23)
    at Drawer (https://537jnq.csb.app/src/Drawer.tsx:17:5)
    at div
    at App

System Info

I've used a barebones setup to quickly show the error but this will happen in any environment, be it Next.js or a regular React app.

Before submitting

  • I've made research efforts and searched the documentation
  • I've searched for existing issues
@SneakySensei SneakySensei added the bug Something isn't working label Dec 28, 2024
@SneakySensei SneakySensei linked a pull request Dec 28, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

docs(Drawer): pass asChild to DrawerClose to avoid nested buttons SneakySensei/ui
1 participant
@SneakySensei