ivyapp / ivy-tabs Goto Github PK

I am running into a "Tab could not be found by model" error every few page loads. It doesn't happen all the time, but I can't seem to track down the cause. Only seeing the issue when running my app with Fastboot.

    {{#ivy-tabs selection=selection as |tabs|}}
      {{#tabs.tablist as |tablist|}}

        {{#tablist.tab "about" on-select=(action (mut selection))}}
          <h3>About</h3>
        {{/tablist.tab}}
        {{#tablist.tab "size" on-select=(action (mut selection))}}
          {{#if model.sizeInfo}}<h3>Size Info</h3>{{/if}}
        {{/tablist.tab}}
        {{#tablist.tab "shipping" on-select=(action (mut selection))}}
          {{#if model.shippingInfo}}<h3>Shipping &amp; Payment Info</h3>{{/if}}
        {{/tablist.tab}}
      {{/tabs.tablist}}


      {{#tabs.tabpanel "about"}}
        <p class="campaign-details--c">{{data.campaign_details__c}}</p>
      {{/tabs.tabpanel}}

      {{#tabs.tabpanel "size"}}
          <p class="campaign-details--c">{{ model.sizeInfo }}</p>
      {{/tabs.tabpanel}}

      {{#tabs.tabpanel "shipping"}}
          <p class="campaign-details--c">{{ model.shippingInfo }}</p>
      {{/tabs.tabpanel}}

    {{/ivy-tabs}}

Hey there,
I've installed the plugin an copy/paste the example code, but i'm getting this issue on ember debug console.

ember.debug.js:16628 Uncaught Error: Assertion Failed: A helper named 'tabs.tablist' could not be found

Any idea what is going on?
Thanks,

$ember -v
ember-cli: 2.4.3
node: 5.10.0
...
"ivy-tabs": "1.2.0"

In ember 2.2.0 it seems that classNameBindings: ['active'] isn't triggering correctly.

emberjs/ember.js#12814

Any idea?

Hello !

First thanks for this project, it is really nice.

I was wondering if there is anyway to have scroll arrow ( or something equivalent ) when there is to much tabs and they cannot be all displayed ?

To better support dynamic content changes, it seems appropriate to add aria-live and related attributes to the tab lists.

It looks like the order in which components get destroyed has changed, which now causes unwanted behavior in your addon. Previously (in at least Ember 2.9 and supposedly many earlier versions) components would get destroyed from highest index to lowest index, yielding the wanted result of the previously selected tab being left in selected state. Now however they're getting destroyed the other way around, causing selectNextTab to be called when other tabs still exist, which in turn will end up "incerementing selection by one" as in selecting the next tab as long as there is a next tab. Tested on 3.0.2.

Hi, great work on this component!

Wanted to see if you had any suggestions for being able to map each tab to specific route?

is there is a reason this package shows up as a 'git' type repo when installed via NPM?

package.json
"ivy-tabs": "git://github.com/IvyApp/ivy-tabs"

I noticed that this relies on bootstrap for styling, but I wanted to do a Material UI theme, so I adapted some examples online and got the styles working. I assume styles are left out of the addon on purpose, but what would you recommend for providing themes to users? I would be glad to share my work.

i would like to know how to select a default tab when there is several tabs
let say i have tabA, tabB, tabC and i want to display tabB in initial load

Is there any way to integrate this component with the liquid-fire animations?

does ivy-tabs support using {{outlets}} within a tabpanel?

something like :

{{#tabs.tabpanel "TabA"}}
{{outlets "taba"}}
{{/tabs.tabpanel}}

probably with the (nested) route for "taba" doing :

renderTemplate: function() {
this.render({ outlet: 'taba' });
},

or is that outside the functionally of the add-on?

See emberjs/ember.js#11170.

I think those of us using this addon are currently pointing our package.jsons at the master branch or a specific commit. I ran into issues before when simply using the latest release, which was cut back in May 2015, and is missing several commits in master.

It would be great if someone could make a new release of this addon! Happy to help out if there's anything I can do.

If I install this module with ember install then I can't use it in my app because it says the helper is not defined:

Uncaught Error: Assertion Failed: A helper named 'ivy-tabs' could not be found

Am I missing something?

Consider the following code:

{{#ivy-tabs selection=selection as |tabs|}}
  {{#tabs.tablist as |tablist|}}
    <ul role="presentation">
      <li role="presentation">
        {{#tablist.tab "TabA" on-select=(action "handleTabSelected")}}Foo{{/tablist.tab}}
      </li>
      <li role="presentation">
        {{#tablist.tab "TabB" on-select=(action "handleTabSelected")}}Bar{{/tablist.tab}}
      </li>
      <li role="presentation">
        {{#tablist.tab "TabC" on-select=(action "handleTabSelected")}}Baz{{/tablist.tab}}
      </li>
    </ul>
  {{/tabs.tablist}}

  {{#tabs.tabpanel "TabA"}}
    <h2>Foo</h2>
  {{/tabs.tabpanel}}

  {{#tabs.tabpanel "TabB"}}
    <h2>Bar</h2>
  {{/tabs.tabpanel}}

  {{#tabs.tabpanel "TabC"}}
    <h2>Baz</h2>
  {{/tabs.tabpanel}}
{{/ivy-tabs}}

When the whole application is being torn down, the handleTabSelected is fired, because each component individually is also torn down leading to tablist trying to trying to select a new tab, when the current tab is destroyed.

Although, this is easy to be worked around in the application, it can lead to hard to debug problems, because apps rarely (ever?) guard from actions, which are fired during destroy.

I will try to submit a failing test for this.

For some reason, rendering an ivy-tab component inside a conditional will cause the index property to not be set correctly.

For example:

{{#ivy-tabs-list}}
  {{#if trueThing}}
    {{ivy-tab}}
  {{/if}}
{{/ivy-tabs-list}}

This only seems to happen if the conditional is a property. Using {{#if true}} will not cause the bug.

If you place the tab list after the tab panels like so

{{#ivy-tabs selection=fpSelection as |tabs|}}
    {{#tabs.tabpanel "tab1"}}
       AA
    {{/tabs.tabpanel}}
    {{#tabs.tabpanel "tab2"}}
       BB
     {{/tabs.tabpanel}}
     {{#tabs.tablist as |tablist|}}
          {{#tablist.tab "tab1" on-select=(action (mut fpSelection)) }}1{{/tablist.tab}}
          {{#tablist.tab "tab2" on-select=(action (mut fpSelection)) }}2{{/tablist.tab}}
      {{/tabs.tablist}}
 {{/ivy-tabs}}

Several errors are generated when tabbing that have to do with ember getting mad about twice modfying properties.

DEPRECATION: You modified aria-hidden twice in a single render. This was unreliable in Ember 1.x and will be removed in Ember 3.0 [deprecation id: ember-views.render-double-modify]
        at logDeprecationStackTrace (http://localhost:4200/app/assets/vendor.js:16707:19)
        at HANDLERS.(anonymous function) (http://localhost:4200/app/assets/vendor.js:16817:7)
        at raiseOnDeprecation (http://localhost:4200/app/assets/vendor.js:16737:12)
        at HANDLERS.(anonymous function) (http://localhost:4200/app/assets/vendor.js:16817:7)
        at invoke (http://localhost:4200/app/assets/vendor.js:16833:7)
        at deprecate (http://localhost:4200/app/assets/vendor.js:16801:32)
        at Object.deprecate (http://localhost:4200/app/assets/vendor.js:29674:37)
        at Class.exports.default._emberMetalMixin.Mixin.create._Mixin$create.scheduleRevalidate (http://localhost:4200/app/assets/vendor.js:54153:26)

DEPRECATION: You modified (-join-classes "ember-view" "ivy-tabs-tabpanel" (-normalize-class "active" active activeClass=undefined inactiveClass=undefined)) twice in a single render. This was unreliable in Ember 1.x and will be removed in Ember 3.0 [deprecation id: ember-views.render-double-modify]
        at logDeprecationStackTrace (http://localhost:4200/app/assets/vendor.js:16707:19)
        at HANDLERS.(anonymous function) (http://localhost:4200/app/assets/vendor.js:16817:7)
        at raiseOnDeprecation (http://localhost:4200/app/assets/vendor.js:16737:12)
        at HANDLERS.(anonymous function) (http://localhost:4200/app/assets/vendor.js:16817:7)
        at invoke (http://localhost:4200/app/assets/vendor.js:16833:7)
        at deprecate (http://localhost:4200/app/assets/vendor.js:16801:32)
        at Object.deprecate (http://localhost:4200/app/assets/vendor.js:29674:37)
        at Class.exports.default._emberMetalMixin.Mixin.create._Mixin$create.scheduleRevalidate (http://localhost:4200/app/assets/vendor.js:54153:26)
        at http://localhost:4200/app/assets/vendor.js:27925:32

This was not an issue in the last version of ivy-tabs

Just wondering if you could point me to a configuration example of using ivy-tabs with a parameter query?

Thanks for this excellent project.

In ember if you wrap template code in an if block ember won't evaluate anything inside the block. This includes any interior computed properties.

Would it be possible to internally wrap the {{yield}} for the tab-panels in an {{#if}} block? This will help to speed up initial renders with the tab panel as it no longer has to render all the tabs at once. I've been doing this with some instances where i use the tab panel and its worked out quite well. Its just really hard to implement on a large scale across the app.

When installing and running your plugin I get the following.

Addon templates were detected, but there are no template compilers registered for `ivy-tabs`. Please make sure your template precompiler (commonly `ember-cli-htmlbars`) is listed in `dependencies` (NOT `devDependencies`) in `ivy-tabs`'s `package.json`.

When a tab panel is not isSelected, it should have an aria-hidden="true" attribute.

Hi folks,

Since we've implemented this addon it's been rapidly embraced throughout the mobile app we're working on. Thanks for making its implementation so simple and straightforward.

There's one use case that I can't figure out how to tackle: we have a few situations where the user will be presented a list of N tabs to choose from, all of which are inactive by default. Below the tabs, where the tab content will load, we intend to display a prompt to the user instructing them to select a tab above.

What's the best way to do this? The hackiest approach I can think of is to create N+1 tabs, and set selectedIndex to N+1 initially, like so:

{{#ivy-tabs on-select=(action (mut selectedIndex)) selected-index=selectedIndex as |tabs|}}

{{#tabs.tablist as |tablist|}}
  {{#tablist.tab}}Tab 1{{/tablist.tab}}
  {{#tablist.tab}}Tab 2{{/tablist.tab}}
  {{#tablist.tab}}Tab 3{{/tablist.tab}}
  {{#tablist.tab}}Can't see me{{/tablist.tab}}
{{/tabs.tablist}}

{{#tabs.tabpanel}}Tab 1 content{{/tabs.tabpanel}}       
{{#tabs.tabpanel}}Tab 2 content{{/tabs.tabpanel}}       
{{#tabs.tabpanel}}Tab 3 content{{/tabs.tabpanel}}       
{{#tabs.tabpanel}}Default prompt the user sees{{/tabs.tabpanel}}        

{{/ivy-tabs}}

Then, we'd explicitly hide the final {{#tablist.tab}} block so the user could never see or select it once they select a different tab.

I know this will work, but it feels icky. Is there a better approach? Should this case be addressed by the addon, or is it out of scope?

Thanks again.