Tabs works weird

[dancixx]

Hi there. I tried to use the Tabs component that way, but it seems the Tab content is stacking over each other as you can see in the picture below.

The tabs header works properly, but when I try to add more tabs dynamically, this vertical stacking occurs. Im attaching the code below. Thanks for your help.

use leptos::{html::*, *};
use thaw::{Tab, TabProps, Tabs, TabsProps};

use crate::{
  footer, query_editor, query_table, sidebar,
  store::{self, editor::EditorStore},
};

pub fn component() -> impl IntoView {
  let tabs = use_context::<store::tabs::Tabs>().unwrap();
  let mut editors = use_context::<EditorStore>().unwrap();

  div()
    .classes("flex h-screen")
    .child(sidebar::index::component())
    .child(
      div()
        .classes("flex flex-col flex-1 overflow-hidden")
        .child(
          main()
            .classes("flex-1 overflow-y-scroll")
            .child(Tabs(TabsProps {
              value: tabs.selected_tab,
              class: MaybeSignal::Static(String::from("flex flex-col")),
              children: Children::to_children(move || {
                Fragment::new(vec![
                  For(ForProps {
                    each: move || (0..tabs.active_tabs.get()),
                    key: |index| index.to_string(),
                    children: move |index| {
                      Tab(TabProps {
                        key: index.to_string(),
                        label: (index + 1).to_string(),
                        class: MaybeSignal::Static(String::from("flex flex-col")),
                        children: Children::to_children(move || {
                          Fragment::new(vec![div()
                            // .child(query_editor::component(index))
                            // .child(query_table::component())
                            .into_view()])
                        }),
                      })
                    },
                  })
                  .into_view(),
                  button()
                    .on(ev::click, move |_| {
                      tabs.active_tabs.update(|prev| *prev += 1);
                      tabs
                        .selected_tab
                        .update(|prev| *prev = (prev.parse::<usize>().unwrap() + 1).to_string());
                      editors.add_editor();
                    })
                    .child("+")
                    .into_view(),
                ])
              }),
            })),
        )
        .child(footer::component()),
    )
}

[luoxiaozero]

I'm not sure I know what you mean. Can you write a minimal demo?

[dancixx]

@luoxiaozero As initially I have one active tab, but there could be more. So if I increase the number of the tabs the tabs header renders properly but the content stacks over each other as you can see in the picture:

Tab header like this:
Tab 1, Tab2, Tab3, .... TabN

Tab Content:
Tab1Content
Tab2Content
....
TabNContet.

So for some reason, the tab contents are always visible despite which tab is active.

[luoxiaozero]

Sorry, I can't match your description with the picture, can you provide a minimum demo code?

I tried the following code with no problem.

let value = create_rw_signal(String::from("apple"));
let active_tabs = create_rw_signal(2);

view! {
    <Tabs value>
        <For each=move || (0..active_tabs.get()) key=|index| index.to_string() let:index>
            <Tab key=index.to_string() label=(index + 1).to_string()>
                "index:" {index}
            </Tab>
        </For>
    </Tabs>
    <Button on_click=move |_| active_tabs.update(|p| *p += 1)>"+1"</Button>
}

[dancixx]

@luoxiaozero

"index:" {index}

This is the equivalent of using this API and the result you can see below in the picture, if I'm creating multiple tabs the latest tab will contain all the prev tabs' content. So in Tab3 you can see Tab1-2-3, in Tab2 you can see Tab1-2, etc...

Tabs(TabsProps {
              value: tabs.selected_tab,
              class: MaybeSignal::Static(String::new()),
              children: Children::to_children(move || {
                Fragment::new(vec![
                  For(ForProps {
                    each: move || (0..tabs.active_tabs.get()),
                    key: |index| index.to_string(),
                    children: move |index| {
                      Tab(TabProps {
                        class: MaybeSignal::Static(String::new()),
                        key: index.to_string(),
                        label: (index + 1).to_string(),
                        children: Children::to_children(move || {
                          Fragment::new(vec![
                            query_editor::component().into_view(),
                            query_table::component().into_view(),
                          ])
                        }),
                      })
                    },
                  })
                  .into_view(),
                  button()
                    .on(ev::click, move |_| {
                      editors.add_editor();
                      tabs.active_tabs.update(|prev| *prev += 1);
                      tabs
                        .selected_tab
                        .update(|prev| *prev = (tabs.active_tabs.get() - 1).to_string());
                    })
                    .child("+")
                    .into_view(),
                ])
              })

[luoxiaozero]

The problem seems to be related to the For component. You can modify it as follows.

Tabs(TabsProps {
              value: tabs.selected_tab,
              class: MaybeSignal::Static(String::new()),
              children: Children::to_children(move || {
                Fragment::new(vec![
                  For(ForProps {
                    each: move || (0..tabs.active_tabs.get()),
                    key: |index| index.to_string(),
                    children: move |index| {
+                    Fragment::new(vec![
                      Tab(TabProps {
                        class: MaybeSignal::Static(String::new()),
                        key: index.to_string(),
                        label: (index + 1).to_string(),
                        children: Children::to_children(move || {
                          Fragment::new(vec![
                            query_editor::component().into_view(),
                            query_table::component().into_view(),
                          ])
                        }),
                      })
+                    .into_view()])
                    },
                  })
                  .into_view(),
                  button()
                    .on(ev::click, move |_| {
                      editors.add_editor();
                      tabs.active_tabs.update(|prev| *prev += 1);
                      tabs
                        .selected_tab
                        .update(|prev| *prev = (tabs.active_tabs.get() - 1).to_string());
                    })
                    .child("+")
                    .into_view(),
                ])
              })

[dancixx]

@luoxiaozero Thanks a lot, this is working. Can you briefly explain why I have to use Fragment in this case? I have used multiple times the For components but it worked without fragment.

[luoxiaozero]

I don't know. The reason for the problem is not easy to find.

[dancixx]

@luoxiaozero and one more question. Maybe possible to add support for custom nodes for tabs?

[luoxiaozero]

Like this? https://chakra-ui.com/docs/components/tabs/usage#creating-custom-tab-components

[dancixx]

@luoxiaozero yes, because I would add a close button to the tabs for example.

[luoxiaozero]

If you just want to add a close button, I can implement it like this https://www.naiveui.com/en-US/light/components/tabs#addable.vue (Do you have any style requirements?)

[dancixx]

@luoxiaozero i think the most general case would be if the tabs header can accept a totally customized children, styled nodes with custom logic.

[luoxiaozero]

Hi, I added this feature in #91 .