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.

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

Add an href property to b-nav-item-dropdown #3942

Closed
scyclops opened this issue Aug 25, 2019 · 6 comments · Fixed by #5344
Closed

Add an href property to b-nav-item-dropdown #3942

scyclops opened this issue Aug 25, 2019 · 6 comments · Fixed by #5344
Projects

Comments

@scyclops
Copy link

@scyclops scyclops commented Aug 25, 2019

Is your feature request related to a problem? Please describe...

Before the javascript has loaded, clicking on the b-nav-item-dropdown causes the page to change and there's no way to control what page the b-nav-item-dropdown goes to because it's hardcoded to '#'.

Describe the solution you'd like

Have b-nav-item-dropdown support a new href property that would allow changing the href while keeping the default as '#'.

The href value of '#' is hardcoded here:

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Aug 25, 2019

An href of # shouldn't change the current page (as it is a local target)

@scyclops
Copy link
Author

@scyclops scyclops commented Aug 26, 2019

It looks like the framework I'm using (Nuxt.js) is inserting a <base href="/app/"> tag into the HTML of every page which causes all relative URLs (including #) to be prefixed by /app/ when they are clicked. So if the page where the link is clicked isn't /app/ then the page will change to be /app/#. It looks like both Firefox and Chrome do this.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

In any case, it would still be useful in my app to be able to set the href property to make sure that when people click it before the javascript is loaded, the correct page loads (which isn't the current page in most cases). This probably isn't a common use case but I thought I'd throw it out there in case other people would find it useful.

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Aug 31, 2019

Perhaps, we couldswitch to using javascript: void 0 as the HREF in this case (unless Vue blocks javascipt URLs)

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Aug 31, 2019

Or if a router is detected, we could default it to the current $route with a hash of #

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Mar 10, 2020

The other option is to see if we can render a button instead of a link with href="#" (although it might require some additional SCSS).

One other option, might be to render a span instead of a link until the javascript is loaded (SSR hydrated)

@jacobmllr95 jacobmllr95 added this to To do in v2.14.0 via automation May 11, 2020
v2.14.0 automation moved this from To do to Done May 11, 2020
jacobmllr95 added a commit that referenced this issue May 11, 2020
…e link (closes #3942) (#5344)

* fix(b-nav-item-dropdown): let `<b-link>` handle `href` default

* Update nav-item-dropdown.js

* Update nav-item-dropdown.spec.js

* Update nav-item-dropdown.js

* Update nav-item-dropdown.js

* Update id.js

* Update nav-item-dropdown.js

* Update nav-item-dropdown.spec.js

* Update nav-item-dropdown.spec.js

* Update README.md

* Update nav-item-dropdown.spec.js

* Update nav-item-dropdown.js

* Update nav-item-dropdown.spec.js

* Update nav-item-dropdown.spec.js

* Update nav-item-dropdown.spec.js

* Update README.md

* Update nav-item-dropdown.js

* Update nav-item-dropdown.spec.js

Co-authored-by: Troy Morehouse <troymore@nbnet.nb.ca>
@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented May 11, 2020

@scyclops in release v2.14.0 the toggle href will be set to the id provided to the <b-nav-item-dropdown> (if an id is provided).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
v2.14.0
  
Done
3 participants