fix(tabs): Show first tab when set to active #912

tmorehouse · 2017-08-22T12:50:20Z

May address issue #911

codecov-io · 2017-08-22T12:51:37Z

Codecov Report

Merging #912 into dev will decrease coverage by 0.01%.
The diff coverage is 75%.

@@            Coverage Diff             @@
##              dev     #912      +/-   ##
==========================================
- Coverage   41.39%   41.37%   -0.02%     
==========================================
  Files          94       94              
  Lines        2307     2308       +1     
  Branches      664      665       +1     
==========================================
  Hits          955      955              
- Misses       1193     1194       +1     
  Partials      159      159

Impacted Files	Coverage Δ
lib/components/tab.vue	`31.81% <75%> (-1.52%)`	⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 5bd2b23...5a66e30. Read the comment docs.

mosinve · 2017-08-22T12:53:07Z

lib/components/tab.vue

@@ -36,7 +36,7 @@
        data() {
            return {
                localActive: this.active && !this.disabled,
-                show: false
+                show: Boolean(this.active && !this.disabled)


why not just localActive? isnt it already boolean?

We don't have access to this.localActive yet at this stage, as it hasn't been returned to the VM.

check this https://codepen.io/cih/pen/eErKvm

ah.... but then maybe at mounted? i dont like this similar code.....

Hmmm... mounted may work, although it should maybe look at localActive on mounted (depending on if b-tabs is set to lazy or not.

mosinve · 2017-08-22T13:06:25Z

Troy... i thought... isn't localActive supposed to be a computed value? if it's a data - then it will be valuated only once.. upon creation of component

tmorehouse · 2017-08-22T13:08:04Z

b-tabs sets the localActive data in b-tab, as it controls which tabs are visible

mosinve · 2017-08-22T13:10:04Z

but computed vars may have a setter..
https://vuejs.org/v2/guide/computed.html#Computed-Setter

tmorehouse · 2017-08-22T13:12:17Z

b-tabs still need to be able to control which b-tab is active through:
https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/lib/components/tabs.vue#L189-L196

mosinve · 2017-08-22T13:15:05Z

and if we assign active prop not at design, but at runtime? will it handle it?

tmorehouse · 2017-08-22T13:17:51Z

Someone can manually set active on all their tabs, but we ensure that only one tab should be visible at a time (we select the last 'active" tab found).

maybe show should be a computed prop (or an inShow computed prop that looks at the show data and the localActive data?

mosinve · 2017-08-22T13:23:39Z

tabs not dynamically following tab's active prop. it looks at localActive, which sets up at mount... so if we set tab.active at runtime - this wont work.

tmorehouse · 2017-08-22T13:23:43Z

I tried setting active tab on fiirst tab (with currentTab set to index 0, and the tab is there, but missing the show property.,

mosinve · 2017-08-22T13:24:10Z

at runtime?

mosinve · 2017-08-22T13:25:38Z

let's try with computed show, i'll check all my doubts at local playground...

tmorehouse · 2017-08-22T13:27:04Z

In the b-tabs doc page.

I set first tab as active (with active prop), and left the app data tabIndex as 0

Tab is definitely showing, but with opacity still at 0 because the show class was missing on the active tab.

It appears the first active tab isn't triggering the transition triggers, which then add the show cl;ass to the b-tab

tmorehouse · 2017-08-22T13:30:18Z

You can see above, that the tab is active but missing the show class, so opacity is still 0

mosinve · 2017-08-22T13:33:51Z

Ah... I saw this.. and after that i tried to set show to true in data... and so on...
But it wont help in case active will set true at runtime...

tmorehouse · 2017-08-22T13:37:04Z

We could change the css transition sniffing and set a duration on the transition to 150ms (if fade, 0 if noFade), which will force the transition to always be timed.

@md

* fix(alert): Fix auto-dimissing alert "bug" (#897) * fix(alert): Fix edgecase where dismissable alert couldnt be re-shown * Update README.md * [alert] add slot for dimiss button content * Update meta.json * [alert] remove deprecated state prop * fix(carousel): Handle older opera oTransitionEnd event (#899) * Fix(navbar-item) typo misspelled safeId function * fix(tabs): Better handling of active tab and transitions (#903) * [tab] Sniff parent fro fade and lazy vals * Update tabs.vue * Update tabs.vue * [tabs] fix keyboard navigation * Update tabs.vue * [tabs] ARIA tweaks * update dependencies rollup configs updated * small typos * docs: remove alert * update nav bar * m-alert * update readme * fix(link): default href to null By explictly setting it to # ssr rendered links will overriden to # even if they hav to prop * fix(link): if nothing is provided default href to # * fix(link): ensure target is vue component before #emit * chore(docs): Update navbar examples * chore(release): 1.0.0-beta.5 * update edit link * nuxt rc6 * feat(readme): add package quality badge (#907) * fix(progress-bar): Minor adjutment to style calculation Use raw percentage for setting width to prevent multiple bars from overflowing outer container * feat(col): BS4 column component (#906) * feat(col): BS4 column component * feat(col): getting column working * fixed index.js from merge * chore(README.md): Update version number * chore(docs): fix header/footer-bg-variants in some card examples * chore(docs): card minor example updates * fix(dropdown): hover/focus shading for active items * fix(nav-item-dropdown): hover/focus shading for active items * fix(scrollspy): Make work with new nav-link functional component (#909) * fix(scrollspy): Make work with new nav-link functional component Before, elements with class `.nav-link` had a compoent VM on their parent element, but `nav-link`s no longer have associated VMs, so we set the `active` class directly on them. * Update scrollspy.js * Update README.md * Update README.md * [scrollspy] get $root from vnode context * Update README.md * fix(tabs): Show first tab when set to active (#912) * fix(tabs): Show first tab when set to active * fix(tabs): minor logic update * chore(docs): Update dropdown docs * feat(table): use computedFields for easier usage * feat(table): Scoped slots for fixed top/bottom rows (#908) * [table] add fixed top and bottom row soped slots * Update meta.json * fix(progress-bar): aria-valuenow fix * Update progress-bar.vue * fix(progress-bar): remove unessesary this in template * fix(alert) dismiss event broken after PR #897 * fix(alert) countdown event test (#916) * fix(alert): show dismiss button when dismissible is true * fix(dropdowns): Migration to popper.js positioning (#913) * update dropdown.vue * Update nav-item-dropdown.vue * [dropdown.js mixin]: Incorporate popper.js * Update README.md * First stab at updaing documentation * docs(progress): Updated first example to include multi bars * fix(form-textarea): Fix value reactivity * docs update and typos fix * fix(dropdowns): Allow gracefull fallback if Popper.js not defined (#920) * fix(dropdowns): Allow gracefull fallback if Popper not defined * Warn on mount that Popper.js not available * ESLint * fix typos * feat(table) refactor to formatter feature * refactor * chore(carousel): Add text shadow to carousel example Add a text shadow style to carousel example to make text on slides easier to read * fix(docs): feedback doc in form group (#934) * feat(b-col): restore `.offset-*` col classes + new b-container and b-row components 🍾🍻🎉 (#929) * feat(col): BS4 column component * feat(col): getting column working * fixed index.js from merge * feat(col): restore .offset-* col classes 🍾 * feat(test): added b-col test suite * [b-col] Update to docs * feat(b-row): New functional component * Make b-row component available * docs:(componentvdoc.vue): Handle pages that don't have a main component * Rename docs page * Rename docs/components/col/README.md to docs/components/grid/README.md * Rename docs/components/col/index.js to docs/components/grid/index.js * Rename docs/components/col/meta.json to docs/components/grid/meta.json * Update index.js * Update README.md * feat(b-conatiner): new functional component b-container component that supports optional fluid prop * make b-container available * [b-container]: ESLint * Update meta.json * Update README.md * [b-row] Add no-cgutters prop * Update README.md * Update README.md * Rename docs/components/grid/README.md to docs/components/layout/README.md * Rename docs/components/grid/index.js to docs/components/layout/index.js * Rename docs/components/grid/meta.json to docs/components/layout/meta.json * rename /docs/grid to /docs/layout * Update meta.json * Update meta.json * [b-row]: demo.html fixture * [b-row] demo.js * Update demo.html * [b-row] Tests * [b-container] demo.html * [b-container] demo.js * [b-container] tests * Update container.spec.js * docs typo * fix(jumbotron): continer wrapper only needed in fluid mode * fix(jumbotron): minor update * revert(jumbotron): Wrong branch :p * fix(docs): toggle navbar @md to keep content from wrapping * feat(docs): add BS4 docs to Layout page * feat(jumbotron): Convert to functional component (#932) * feat(jumbotron): Convert to functional component * Use FC version of jumbotron * ESLint * Delete jumbotron.vue * typo fix * Update demo.html * Update jumbotron.spec.js * Update jumbotron.spec.js * Update demo.html * Update jumbotron.spec.js * Update jumbotron.spec.js * Update jumbotron.spec.js * Update jumbotron.spec.js * Update jumbotron.spec.js * Update jumbotron.spec.js * Update jumbotron.spec.js * Update jumbotron.spec.js * Update jumbotron.spec.js * Update jumbotron.spec.js * Update jumbotron.spec.js * Merge dev into branch (#935) * fix(docs): feedback doc in form group (#934) * feat(b-col): restore `.offset-*` col classes + new b-container and b-row components 🍾🍻🎉 (#929) * feat(col): BS4 column component * feat(col): getting column working * fixed index.js from merge * feat(col): restore .offset-* col classes 🍾 * feat(test): added b-col test suite * [b-col] Update to docs * feat(b-row): New functional component * Make b-row component available * docs:(componentvdoc.vue): Handle pages that don't have a main component * Rename docs page * Rename docs/components/col/README.md to docs/components/grid/README.md * Rename docs/components/col/index.js to docs/components/grid/index.js * Rename docs/components/col/meta.json to docs/components/grid/meta.json * Update index.js * Update README.md * feat(b-conatiner): new functional component b-container component that supports optional fluid prop * make b-container available * [b-container]: ESLint * Update meta.json * Update README.md * [b-row] Add no-cgutters prop * Update README.md * Update README.md * Rename docs/components/grid/README.md to docs/components/layout/README.md * Rename docs/components/grid/index.js to docs/components/layout/index.js * Rename docs/components/grid/meta.json to docs/components/layout/meta.json * rename /docs/grid to /docs/layout * Update meta.json * Update meta.json * [b-row]: demo.html fixture * [b-row] demo.js * Update demo.html * [b-row] Tests * [b-container] demo.html * [b-container] demo.js * [b-container] tests * Update container.spec.js * docs typo * fix(jumbotron): continer wrapper only needed in fluid mode * fix(jumbotron): minor update * revert(jumbotron): Wrong branch :p * fix(docs): toggle navbar @md to keep content from wrapping * feat(docs): add BS4 docs to Layout page * Update jumbotron.js * Update jumbotron.js * Update jumbotron.spec.js * Update demo.html * Update jumbotron.spec.js * Update jumbotron.spec.js * Attempt last part of tests * Update demo.html * Final tests * docs: Fix typo in Form Checkbox page (#939) Fix typo * feat(layout): alignment utilities 🛠 (#941) * feat(b-img): New component (#933) * feat(b-img): New functional component Support many options, plus the ability to create blank images of any size * [b-img] Support solid/transparent color blank image * make b-img component avilalable * Create meta.json * Create index.js * Create README.md * Add b-img docs * Create demo.html * Create demo.js * Create img.spec.js * feat: New popper.js based tooltip/popover directives and components (#923) * Create tooltip.js * Warn on mount that Popper.js not available * Update index.js * Create README.md * [tooltip] Create shared class * [popover] Common shared class * Fix template compiler * [popover] v-b-popover directive * Remove tether dependency * [tooltip.js class] Code optimizations * create classes index * force tip template recompile on next show, in case template changes * [tooltip class] Add comments as to which methods PopOver overwrites * new tooltip.vue component * New popover.vue component * Make new popover.vue and tooltip.vue components available * Update README.md * Allow reactive components in b-popover content * b-popover: callback hooks for events * b-tooltip: callback hooks for events * [tooltip class]: add callback hooks * popover meta.json: document events * b-tooltip meta.json: document events * [tooltip class] Allow reactive content in title element * [popover class] Allow reactive content in title and content * [BvEvent]: add relatedTarget descriptor * [tooltip.js class] Better callback handling + cancelable hide & show events Better callback handling, and allow hide & show callback to cancel hide or show of tooltip/popover * [b-popover]: Enable canclable show and hide events * [b-tooltip]: Add cancelable show and hide events * [tooltip class]: Emit events on $root * [tooltip popover] namespace events emitted on $root Root events are emitted with namespaced event name. i.e. `bv:tooltip::show` and `bv:popover::hidden` * [tooltip class] Prepare for future bv:modal:hidden $root event name * Update rollup.config.js * Update webpack.config.js * fix: include popper.js in dist bundle * refactor(eslint): remove semicolons to placate eslint * refactor: rm semicolons in classes & add BvEvent to class dir * [tooltip.js] Optimise isWithContent() * Fixes to Popover & Tooltip Components Docs Fix to ToolTip component * [popover.js] Optimise isWithContent() * feat(popover): import fix * fix(popove): tooltip import

fix(tabs): Show first tab when set to active

f59f021

tmorehouse added Type: Bug v1.x labels Aug 22, 2017

tmorehouse added this to the v1.0.0 milestone Aug 22, 2017

tmorehouse requested a review from mosinve August 22, 2017 12:50

mosinve reviewed Aug 22, 2017

View reviewed changes

Update tab.vue

3958f87

tmorehouse added 2 commits August 22, 2017 10:51

Update tab.vue

0e76b4a

Update tab.vue

ef617f1

tmorehouse assigned tmorehouse and mosinve Aug 22, 2017

tmorehouse added 4 commits August 22, 2017 11:23

Update tab.vue

ede45de

Update tab.vue

9511775

Update tab.vue

520fd7f

Update tab.vue

5a66e30

tmorehouse merged commit d920b1c into dev Aug 22, 2017

tmorehouse deleted the tmorehouse/tabs-active branch August 24, 2017 18:12

pi0 mentioned this pull request Aug 30, 2017

<b-tabs> glitch with active #938

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(tabs): Show first tab when set to active #912

fix(tabs): Show first tab when set to active #912

tmorehouse commented Aug 22, 2017 •

edited

Loading

codecov-io commented Aug 22, 2017 •

edited

Loading

mosinve Aug 22, 2017 •

edited

Loading

tmorehouse Aug 22, 2017

mosinve Aug 22, 2017

mosinve Aug 22, 2017 •

edited

Loading

tmorehouse Aug 22, 2017

mosinve commented Aug 22, 2017

tmorehouse commented Aug 22, 2017

mosinve commented Aug 22, 2017 •

edited

Loading

tmorehouse commented Aug 22, 2017 •

edited

Loading

mosinve commented Aug 22, 2017

tmorehouse commented Aug 22, 2017

mosinve commented Aug 22, 2017

tmorehouse commented Aug 22, 2017

mosinve commented Aug 22, 2017

mosinve commented Aug 22, 2017

tmorehouse commented Aug 22, 2017 •

edited

Loading

tmorehouse commented Aug 22, 2017

mosinve commented Aug 22, 2017 •

edited

Loading

tmorehouse commented Aug 22, 2017 •

edited

Loading

fix(tabs): Show first tab when set to active #912

fix(tabs): Show first tab when set to active #912

Conversation

tmorehouse commented Aug 22, 2017 • edited Loading

codecov-io commented Aug 22, 2017 • edited Loading

Codecov Report

mosinve Aug 22, 2017 • edited Loading

Choose a reason for hiding this comment

tmorehouse Aug 22, 2017

Choose a reason for hiding this comment

mosinve Aug 22, 2017

Choose a reason for hiding this comment

mosinve Aug 22, 2017 • edited Loading

Choose a reason for hiding this comment

tmorehouse Aug 22, 2017

Choose a reason for hiding this comment

mosinve commented Aug 22, 2017

tmorehouse commented Aug 22, 2017

mosinve commented Aug 22, 2017 • edited Loading

tmorehouse commented Aug 22, 2017 • edited Loading

mosinve commented Aug 22, 2017

tmorehouse commented Aug 22, 2017

mosinve commented Aug 22, 2017

tmorehouse commented Aug 22, 2017

mosinve commented Aug 22, 2017

mosinve commented Aug 22, 2017

tmorehouse commented Aug 22, 2017 • edited Loading

tmorehouse commented Aug 22, 2017

mosinve commented Aug 22, 2017 • edited Loading

tmorehouse commented Aug 22, 2017 • edited Loading

tmorehouse commented Aug 22, 2017 •

edited

Loading

codecov-io commented Aug 22, 2017 •

edited

Loading

mosinve Aug 22, 2017 •

edited

Loading

mosinve Aug 22, 2017 •

edited

Loading

mosinve commented Aug 22, 2017 •

edited

Loading

tmorehouse commented Aug 22, 2017 •

edited

Loading

tmorehouse commented Aug 22, 2017 •

edited

Loading

mosinve commented Aug 22, 2017 •

edited

Loading

tmorehouse commented Aug 22, 2017 •

edited

Loading