[BUG] - 2.6.2 DropdownItem links no longer function

[daveycodez]

NextUI Version

2.6.2

Describe the bug

DropdownItems with href's are rendering as "a" tags but when pressed they are not calling navigate. I'm on NextJS. I tried adding as={Link} to the DropdownItem which fixes this issue but now creates a warning

[<a> cannot appear as a descendant of <a>.](client.js:85 Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.)

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Attempt to add an href to DropdownItem

Expected behavior

Tapping a DropdownItem with an href should correctly call the navigate function of NextUIProvider

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[linear]

ENG-1659 [BUG] - 2.6.2 DropdownItem links no longer function

[wingkwong]

please share your package.json

[daveycodez]

{
  "name": "daveyplate",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "dev": "next dev & nodemon --exec node code-sync.js --quiet",
    "ngrok": "ngrok http --domain=leaked.ngrok.dev 3000",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "export": "NEXT_PUBLIC_IS_EXPORT=1 sh export.sh",
    "postinstall": "react-flagpack",
    "generate-icons": "generate-icons --source ./public/icons/icon-512.png",
    "stripe:listen": "stripe listen --forward-to=localhost:3000/api/webhooks --project-name=daveyplate"
  },
  "dependencies": {
    "@capacitor/android": "^5.7.6",
    "@capacitor/app": "^5.0.8",
    "@capacitor/browser": "^5.2.1",
    "@capacitor/core": "^5.7.6",
    "@capacitor/ios": "^5.7.6",
    "@capacitor/network": "^5.0.8",
    "@daveyplate/generate-icons": "^1.0.4",
    "@daveyplate/next-cors-middleware": "^1.0.1",
    "@daveyplate/next-open-graph": "^1.0.2",
    "@daveyplate/next-page-title": "^1.0.3",
    "@daveyplate/next-rate-limit": "^1.0.8",
    "@daveyplate/nextui-confirm-modal": "^1.0.5",
    "@daveyplate/nextui-crop-image-modal": "^1.0.5",
    "@daveyplate/nextui-fixed-avatar": "^1.0.6",
    "@daveyplate/supabase-auth-nextui": "^1.0.4",
    "@daveyplate/supabase-swr-entities": "^3.0.22",
    "@daveyplate/tailwind-drag-dropzone": "^1.0.4",
    "@daveyplate/use-scroll-restoration": "^1.0.4",
    "@daveyplate/use-window-focus-blur": "^1.0.0",
    "@heroicons/react": "^2.1.5",
    "@iamtraction/google-translate": "^2.0.1",
    "@leakeddave/my-jsx-package": "file:../supabase-auth-nextui",
    "@next/bundle-analyzer": "^15.0.3",
    "@piotr-cz/swr-idb-cache": "^1.0.3",
    "@nextui-org/react": "^2.6.3",
    "@sidekickicons/react": "^0.7.0",
    "@supabase/auth-helpers-react": "^0.5.0",
    "@supabase/auth-ui-react": "^0.4.7",
    "@supabase/auth-ui-shared": "^0.1.8",
    "@supabase/postgrest-js": "^1.16.3",
    "@supabase/ssr": "^0.5.1",
    "@supabase/supabase-js": "^2.45.6",
    "@uidotdev/usehooks": "^2.4.1",
    "@vercel/analytics": "^1.3.2",
    "@vercel/speed-insights": "^1.0.14",
    "compressorjs": "^1.2.1",
    "dotenv": "^16.4.5",
    "framer-motion": "^11.11.10",
    "javascript-time-ago": "^2.5.11",
    "micro": "^10.0.1",
    "next": "^15.0.2",
    "next-auto-translate": "^1.0.56",
    "next-intl": "^3.23.5",
    "next-language-detector": "^1.1.0",
    "next-themes": "^0.4.3",
    "node-gzip": "^1.1.2",
    "nodemon": "^3.1.7",
    "nuqs": "^2.2.3",
    "peerjs": "^1.5.4",
    "pulltorefreshjs": "^0.1.22",
    "react": "^18.3.1",
    "react-avatar-editor": "^13.0.2",
    "react-device-detect": "^2.2.3",
    "react-dom": "^18.3.1",
    "react-flagpack": "^2.0.6",
    "react-simple-wysiwyg": "^3.1.3",
    "react-swipe-to-delete-ios": "^2.1.0",
    "react-time-ago": "^7.3.3",
    "sonner": "^1.7.0",
    "stripe": "^17.2.1",
    "swr": "^2.2.5",
    "tailwindcss": "^3.4.14",
    "tailwindcss-animate": "^1.0.7",
    "tailwindcss-safe-area": "^0.6.0",
    "uuid": "^11.0.2",
    "yet-another-react-lightbox": "^3.21.1"
  },
  "devDependencies": {
    "@capacitor/cli": "^5.7.0",
    "@iconify/react": "^5.0.2",
    "@types/react": "^18.3.13",
    "autoprefixer": "^10.4.20",
    "file-loader": "^6.2.0",
    "husky": "^9.1.6"
  },
  "packageManager": "[email protected]"
}

[wingkwong]

for the a tag issue, let's track in #4256. This issue will focus on the issue why dropdown href won't trigger navigate.

[daveycodez]

@wingkwong

Thank you for looking into this. Please also address this urgent issue that is breaking for me on iOS:

#4143

I found the problem. When you select a DropdownItem it adds this to the <html> tag:

-webkit-user-select: none;

And it doesn't go away. This is really important for my native iOS Capacitor builds and should be a quick fix I think

[wingkwong]

please leave the finding in the corresponding issue. the threads should be only related to the this issue only.

[imbazim]

Same here. I upgraded to NextUI 2.6.3 today and found this issue on my navbar Dropdown items. a tag is not doing anything. with that i noticed that, now a tag is not filled to the entire menu item hover, means I need to click the exact title of the a tag to click the link.

[wingkwong]

introduced from #4168

[FranzaLeny]

Same with nextui 2.6.4

[eaglit]

Same here. I had to downgrade to version 2.4.6 because my application's main navigation bar uses

(Link is imported from next/link).

We just want it to work as it did before and prefer not to use the new routing system. Please keep the library simple—"simple is the best." Let next/link handle its job without additional complexity.

[J4v4Scr1pt]

Same issue here broken styling and I want the whole list-item to be an a-tag and render it as next/link but then NextJS breaks because there will be an a-tag inside of a-tag. Using the NavBar from NextUI Pro.

Can't upgrade because of this. Any ETA on a fix?