From 42b4395437d7466eb1bf98af319803f6455204dc Mon Sep 17 00:00:00 2001
From: Mohit5Upadhyay <upadhyaym7060@gmail.com>
Date: Sun, 6 Jul 2025 15:04:15 +0530
Subject: [PATCH 1/2] fix(docs): update VariantItem link implementation and
 separate CLI version docs  Closes npm/cli#8414

---
 src/components/variant-select.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/variant-select.js b/src/components/variant-select.js
index b04f0271762..516fc1d9786 100644
--- a/src/components/variant-select.js
+++ b/src/components/variant-select.js
@@ -14,11 +14,16 @@ const StyledOverlay = styled(ActionMenu.Overlay)`
   box-shadow: var(--shadow-resting-medium, 0 3px 6px rgba(140, 149, 159, 0.15));
 `
 
-const VariantItem = ({title, shortName, url, active}) => (
-  <ActionList.Item as={LinkNoUnderline} to={url} state={{scrollUpdate: false}} id={shortName} active={active}>
-    {title}
-  </ActionList.Item>
-)
+const VariantItem = ({title, shortName, url, active}) => {
+  return (
+    <ActionList.Item state= {{scrollUpdate: false}} id={shortName} active={active}>
+      <LinkNoUnderline 
+        to={url}
+      >
+        {title}
+      </LinkNoUnderline>
+  </ActionList.Item>)
+}
 
 const useVariantFocus = () => {
   const locationChange = useLocationChange()

From ec83dc48a6c0a47c55cefd71c5d8f34876c0121a Mon Sep 17 00:00:00 2001
From: Mohit5Upadhyay <upadhyaym7060@gmail.com>
Date: Fri, 11 Jul 2025 13:03:40 +0530
Subject: [PATCH 2/2] fix(docs): close version dropdown on variant change by
 useLocationChange Closes npm/cli#8414

---
 src/components/variant-select.js | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/variant-select.js b/src/components/variant-select.js
index 516fc1d9786..a8c614fbcb5 100644
--- a/src/components/variant-select.js
+++ b/src/components/variant-select.js
@@ -16,13 +16,10 @@ const StyledOverlay = styled(ActionMenu.Overlay)`
 
 const VariantItem = ({title, shortName, url, active}) => {
   return (
-    <ActionList.Item state= {{scrollUpdate: false}} id={shortName} active={active}>
-      <LinkNoUnderline 
-        to={url}
-      >
-        {title}
-      </LinkNoUnderline>
-  </ActionList.Item>)
+    <ActionList.Item state={{scrollUpdate: false}} id={shortName} active={active}>
+      <LinkNoUnderline to={url}>{title}</LinkNoUnderline>
+    </ActionList.Item>
+  )
 }
 
 const useVariantFocus = () => {
@@ -42,6 +39,13 @@ const VariantMenu = ({title, latest, current, prerelease, legacy}) => {
   const [open, setOpen] = React.useState(false)
   const anchorRef = useVariantFocus()
   const labelId = 'label-versions-list-item'
+  const locationChange = useLocationChange()
+
+  React.useEffect(() => {
+    if (locationChange.change && getNav.didVariantChange(locationChange.previous, locationChange.current)) {
+      setOpen(false)
+    }
+  }, [locationChange.change, locationChange.current, locationChange.previous])
 
   return (
     <>