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
feat(b-nav-item-dropdown): improve default handling of dropdown toggle link (closes #3942) #5344
Conversation
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/bootstrap-vue/bootstrap-vue/5mugwmuje |
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 7670e11:
|
Codecov Report
@@ Coverage Diff @@
## dev #5344 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 281 281
Lines 8825 8828 +3
Branches 2505 2505
=========================================
+ Hits 8825 8828 +3
Continue to review full report at Codecov.
|
I just checked in the PR preview, and checked the SSR rendered source for the version dropdown in the docs nav, and it renders the following (before hydration): a aria-haspopup="true" aria-expanded="false" href="#" target="_self" class="nav-link dropdown-toggle mr-md-2"><span>Pull Request</span></a> So the Perhaps we could try and use a Edit: Just tested rendering a native |
@tmorehouse Or we just expose |
We would still need to make sure event.preventDefault() is called... Another option would be to set an ID on the |
The |
Hmm, we should be adding How about we add an ID prop. This ID will be added to the link and then used as the <a :id="id" :href="'#' + id'" role="button"> This way, before the page is hydrated, the link will just scroll to the A tag (which should already be in view and hence not scroll). If hte ID is null/blank/undefined, it would just render a plain This way the purpose of EDIT: Actually we do have As long as the user supplies a unique ID, the href will be valid during SSR and before hydration |
<b-link>
handle href
default value (closes #3942)href
prop and improve default handling (closes #3942)
…trap-vue/bootstrap-vue into fix-nav-item-dropdown-href
href
prop and improve default handling (closes #3942)
Describe the PR
This PR improves the link handling of
<b-nav-item-dropdown>
by assining the user provided ID as the toggle linkhref
has link.When
id
prop isn't set (defaults tonull
) thehref
for the<b-link>
i set to#
. If anid
is provided, then thehref
for<b-link>
will be set to#{id}
. This way, before the page is hydrated, the link will just scroll to the A tag (which should already be in view and hence not scroll) rather than scrolling to the top of the page.Closes #3942.
PR checklist
What kind of change does this PR introduce? (check at least one)
fix(...)
, requires a patch version updatefeat(...)
, requires a minor version updatefeat(...)
, requires a minor version updatefix(...)
, requires a patch or minor version updatechore(docs)
, requires a patch version updateDoes this PR introduce a breaking change? (check one)
The PR fulfills these requirements:
dev
branch, not themaster
branch[...] (fixes #xxx[,#xxx])
, where "xxx" is the issue number)fix(alert): not alerting during SSR render
,docs(badge): update pill examples
,chore(docs): fix typo in README
, etc). This is very important, as theCHANGELOG
is generated from these messages, and determines the next version type (patch or minor).If new features/enhancement/fixes are added or changed:
If adding a new feature, or changing the functionality of an existing feature, the PR's
description above includes: