Tabs: activeid vs. boolean to activate

[matthewp]

The proposal document talks about an activeid attribute as a way to set the active tab. Some implementations instead have an active boolean that you can set on a tab. Which approach should we take?

[gregwhitworth]

@chrisdholt @nicholasrice @stubbornella @bkardell given your interest in tabs can you help move this forward?

[bkardell]

Yeah, I have a kind of meta question on this because I'm not sure we should talk about this. In order to talk about an attribute I feel like you kind of need an idea about what the actual serialization looks like and how it is used. You could easily start with the idea that:

• the first one is selected by default
• that there is a property that is .activeIndex
• individual parts also have a .activate() method which would manage the activeIndex

And that gets you very very far, kind of best of both worlds (it just depends which is better to you in practice) without talking about attributes or serializations which gets actually trickier, especially if you haven't pinned down actual structures yet. How does this sound as a starting point? In HTML, I think the "smart" thing to do would be to have a non-reflective boolean marker attribute for sending down which is selected by default but I feel like getting into that leads us down a lot of other difficult things too early. Could we kind of punt on this as an attribute for now?

[gregwhitworth]

In order to talk about an attribute I feel like you kind of need an idea about what the actual serialization looks like and how it is used.

This is assuming the attribute goes into the platform, this may not be the case as currently it will just be an undefined attribute but is still possible to leverage as an attribute. Granted, I'd expect it to end up in the platform but the complexities don't need to be tackled at this stage. I am not advocating for/against the attribute itself but should align with what is common practice.

You could easily start with the idea that:

the first one is selected by default
that there is a property that is .activeIndex
individual parts also have a .activate() method which would manage the activeIndex

Completely agree. I just want to ensure that issues move forward and try to keep them from becoming stale.

[bkardell]

Yes, sorry - this is on my list to return to having some time for after next week.

[matthewp]

@bkardell

In HTML, I think the "smart" thing to do would be to have a non-reflective boolean marker attribute for sending down which is selected by default but I feel like getting into that leads us down a lot of other difficult things too early. Could we kind of punt on this as an attribute for now?

Why do you feel this way? To me not having a way to select the active tab via HTML is a pretty big deficiency and something we should not punt on.

Just doing a quick look I see that Material, Bootstrap, and Shoestyle are all using a boolean. And of course <select> uses a boolean. A boolean of active with activeIndex on the container seems natural to me.

[eljefe223]

Wanted to chime in here from FAST's perspective. We currently support activeid which we would like to move away from. The reason is if an id is not passed to each tab we need to assign an id in order for tabs to work.

tab.setAttribute(
     "id",
     typeof tabId !== "string" ? `tab-${index + 1}` : tabId
);

If someone tries to set activeid to one of those auto assigned ids the functionality breaks because the activeid is trying to be set on an id that has not been created yet.

Our proposal is to switch to activeindex on fast-tabs which would bypass the above issue, We also would like to add the ability to pass active to the tab itself.

If activeindex conflicts with an active attribute on a tab activeindex wins.
if multiple tabs are set too active the last active ab in the the dom order wins.

[github-actions]

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.