Merge branch 'fix-nav-item-dropdown-href' of https://github.com/bootstrap-vue/bootstrap-vue into fix-nav-item-dropdown-href

jacobmllr95 · jacobmllr95 · commit a5aca94d54c4 · 2020-05-12T00:45:02.000+02:00
diff --git a/package.json b/package.json
@@ -106,7 +106,7 @@
     "@nuxtjs/google-analytics": "^2.2.3",
     "@nuxtjs/pwa": "^3.0.0-beta.20",
     "@nuxtjs/robots": "^2.4.2",
-    "@nuxtjs/sitemap": "^2.2.1",
+    "@nuxtjs/sitemap": "^2.3.0",
     "@testing-library/jest-dom": "^5.7.0",
     "@vue/test-utils": "^1.0.2",
     "autoprefixer": "^9.7.6",
diff --git a/src/components/nav/README.md b/src/components/nav/README.md
@@ -190,12 +190,13 @@ Use `<b-nav-item-dropdown>` to place dropdown items within your nav.
 
 Sometimes you want to add your own class names to the generated dropdown toggle button, that by
 default have the classes `nav-link` and `dropdown-toggle`. Use the `toggle-class` prop to add them
-(like above) which will produce something like:
+(like above) which will render HTML similar to:
 
 ```html
 <li id="my-nav-dropdown" class="nav-item b-nav-dropdown dropdown">
   <a
-    href="#"
+    role="button"
+    href="#my-nav-dropdown"
     id="my-nav-dropdown__BV_button_"
     aria-haspopup="true"
     aria-expanded="false"
@@ -222,6 +223,17 @@ shown. When there are a large number of dropdowns rendered on the same page, per
 impacted due to larger overall memory utilization. You can instruct `<b-nav-item-dropdown>` to
 render the menu contents only when it is shown by setting the `lazy` prop to true.
 
+### Dropdown implementation note
+
+Note that the toggle button is actually rendered as a link `<a>` tag with `role="button"` for
+styling purposes, and typically has the `href` set to `#` unless and ID is provided via the `id`
+prop.
+
+The toggle will prevent scroll top top behaviour (via javascript) when clicking the toggle link. In
+some cases when using SSR, and the user clicks the toggle button _before_ Vue has had a chance to
+hydrate the component, the page will scroll to top. In these cases, simply providing a unique ID
+via the `id` prop will prevent the unwanted scroll to top behaviour.
+
 ## Nav text content
 
 Use the `<b-nav-text>` child component to place plain text content into the nav:
diff --git a/src/components/nav/nav-item-dropdown.spec.js b/src/components/nav/nav-item-dropdown.spec.js
@@ -87,9 +87,10 @@ describe('nav-item-dropdown', () => {
     await waitNT(wrapper.vm)
 
     expect(wrapper.element.hasAttribute('id')).toBe(true)
+    expect(wrapper.attributes('id').toEqual('foo')
 
     const $toggle = wrapper.find('.dropdown-toggle')
-    expect($toggle.attributes('href')).toEqual(`#${wrapper.attributes('id')}`)
+    expect($toggle.attributes('href')).toEqual('#foo')
 
     wrapper.destroy()
   })
diff --git a/yarn.lock b/yarn.lock
@@ -1594,13 +1594,13 @@
   resolved "https://registry.yarnpkg.com/@nuxtjs/robots/-/robots-2.4.2.tgz#9a96c91abb70e39b414eec502ef1cf7d5ef0235e"
   integrity sha512-BW3qhvxlPBKlMkZHtARFPeliFraiZHS28G3j4qgRbSfOBtHC0yDX3Dnq1LkQMzAbPfbw6A1L3sdjgBVZZnfFAw==
 
-"@nuxtjs/sitemap@^2.2.1":
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/@nuxtjs/sitemap/-/sitemap-2.2.1.tgz#a00b528e361673b3f2651a0f1ee4081e89f9c6fd"
-  integrity sha512-GrXTueBaSQgAuBbUrGcKu37VbZBOZ4omHqk8FfthK71R26vp9LWUcqlRbuQaIrAYynjSfSPxaLpX8opUwO1nKw==
+"@nuxtjs/sitemap@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/sitemap/-/sitemap-2.3.0.tgz#ca032b84f54a6570123305098b2b9a7821f4ab29"
+  integrity sha512-mSh0vc8HuJHMOm8ifKIKXxGETDq+Oc7MgwWVeq20AEfblNQUOWFLv+bYqh8BkxvuXc2/488zMrKhWOfwzasQOA==
   dependencies:
     async-cache "^1.1.0"
-    consola "^2.11.3"
+    consola "^2.12.1"
     etag "^1.8.1"
     fresh "^0.5.2"
     fs-extra "^8.1.0"
@@ -3811,6 +3811,11 @@ consola@^2.10.0, consola@^2.10.1, consola@^2.11.3, consola@^2.6.0, consola@^2.9.
   resolved "https://registry.yarnpkg.com/consola/-/consola-2.11.3.tgz#f7315836224c143ac5094b47fd4c816c2cd1560e"
   integrity sha512-aoW0YIIAmeftGR8GSpw6CGQluNdkWMWh3yEFjH/hmynTYnMtibXszii3lxCXmk8YxJtI3FAK5aTiquA5VH68Gw==
 
+consola@^2.12.1:
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/consola/-/consola-2.12.1.tgz#88e9311a02cb88a7f6f9488239dd30b6ba99cbb0"
+  integrity sha512-aEkkju9ZcEa9y2MhzNhfmTUws/CEZZ0LKu0FxftSU3HygPfVMMIMSYyYct+xBN6XNRhsaDZjw2HAv3m2ammXSA==
+
 console-browserify@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
