Islands components probably don't work properly when I nest an interactive component (Islands) in another.

[j-Cis]

I wanted to create a multi-level accordian component, but I don't understand why it doesn't work as expected.

When the same accordian component is single-level, everything works correctly. But the attempt to add a second level, brought an unexpected effect, freezing both levels.

I created a GitHub repository to model this problem (https://github.com/j-Cis/deno-fresh-error-notworking-nested-islands)

The defective this operation can be checked here: (https://deno-fresh2-errors.deno.dev/accordion/with-nested-accordion)

Below is

1. the component affected of problem or error, 2. and the page accordion-with-nested-accordion from the router on which it does not work properly , 3. and the page accordion-without-nested-accordion from the router on which it works properly (the same component), 4. the full of simple model is in the github repository. (https://github.com/j-Cis/deno-fresh-error-notworking-nested-islands)

1-a. the component affected of problem or error, ./components/AccordionContainer.tsx.

import { ComponentChildren, h } from "preact";

interface AccordionContainerProps {
  children: ComponentChildren;
}

export default function AccordionContainer(props: AccordionContainerProps): h.JSX.Element {
  return (
    <div 
      class={[
        "rounded-none border border-l-0 border-r-0 border-b-0",
        "bg-white dark:bg-neutral-800",
        "border-t-4 border-t-stone-200"
      ].join(" ")}
    >
      {props.children}
    </div>
  );
}

1-b. the component affected of problem or error, ./islands/AccordionItem.tsx.

import type { Signal } from "@preact/signals";
import { ComponentChildren, h } from "preact";

interface AccordionItemProps {
  children: ComponentChildren;
  label: string;
  labelIsLink?:boolean;
  href?:string;
  show: Signal<boolean>;
}

export default function AccordionItem(props: AccordionItemProps): h.JSX.Element {
  return (
    <div class=" flex flex-col flex-1 flex-nowrap">
      <div 
        class={[
          "flex flex-row flex-nowrap",
          "justify-between",
          "mb-0",
          props.show.value && "[box-shadow:inset_0_-1px_0_rgba(229,231,235)] dark:[box-shadow:inset_0_-1px_0_rgba(75,85,99)]",
          !props.show.value && "border-b-4 border-b-stone-200"
        ].join(" ")}
      >        
        <div class="flex flex-col flex-nowrap justify-center px-2">
          <button 
            class={[
              "box-border size-10  border-b-4 border-b-stone-200",
              props.show.value ? "bg-cyan-700 px-[16px]" : "bg-emerald-700 pr-[16px] pl-[12px]",
              "flex w-full items-center",
              "transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none"
            ].join(" ")}
            onClick={() => props.show.value = !props.show.value}
            type="button"
            aria-expanded="true"
            aria-controls="collapseOne"
          >
            <span
              class={[
                props.show.value 
                  ? "rotate-[-180deg] -mr-1"
                  : "rotate-0 fill-[#212529] dark:fill-white",
                "ml-auto h-5 w-5 shrink-0 fill-[#336dec] transition-transform duration-200",
                "ease-in-out motion-reduce:transition-none dark:fill-blue-300"
              ].join(" ")}
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                view-box="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="h-6 w-6"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M19.5 8.25l-7.5 7.5-7.5-7.5"
                />
              </svg>
            </span>
          </button>     
        </div>    
        <h2 class={[
          "text-wrap text-lg px-5 py-4 text-left  font-bold text-gray-900",
          props.labelIsLink && "hover:text-gray-600 hover:underline hover:decoration-double hover:decoration-2",
          props.labelIsLink
            ? props.show.value ? "hover:decoration-cyan-700" : "hover:decoration-emerald-700"
            : "",
          props.labelIsLink && "aria-[current]:text-green-700 aria-[current]:underline aria-[current]:decoration-double aria-[current]:decoration-4"
        ].join(" ")}>
          {props.labelIsLink && <a href={props.href ?? ""} > {` ${props.label} `} </a> }
          {!props.labelIsLink && <>{` ${props.label} `}</>}          
        </h2>
      </div>
      {props.show.value && <div class="!mt-0 !rounded-b-none !shadow-none border-b-4 border-b-stone-200">
          <div class="px-5 py-4">
            {props.children}
          </div>
        </div>
      }
    </div>
  );
}

2. the page accordion-with-nested-accordion from the router on which it does not work properly , ./routes/accordion/with-nested-accordion.tsx

import { useSignal } from "@preact/signals";
import define from "$utils/fresh.ts";
import Layout from "$components/Layout.tsx";
import AccordionItem from "$islands/AccordionItem.tsx";
import AccordionContainer from "$components/AccordionContainer.tsx";

export default define.page(function PageAccordionWithNestedAccordion(/*{url}*/) {

  const showItem1 = useSignal(true);
  const showItem1A = useSignal(true);
  const showItem1B = useSignal(false);
  const showItem1C = useSignal(false);
  const showItem2 = useSignal(false);
  const showItem2A = useSignal(false);
  const showItem2B = useSignal(false);
  const showItem3 = useSignal(false);

  //console.log(url.pathname)

  return (
    <Layout navShow={true} navActive="/accordion" asideShow={true} aside={
        <AccordionContainer>
          <AccordionItem label="Item 1" labelIsLink={true} href="" show={showItem1}>
            <div>
                  <strong>This is the first item's accordion body.</strong> Lorem
                  ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu
                  rhoncus purus, vitae tincidunt nibh. Vivamus elementum egestas
                  ligula in varius. Proin ac erat pretium, ultricies leo at, cursus
                  ante. Pellentesque at odio euismod, mattis urna ac, accumsan
                  metus. Nam nisi leo, malesuada vitae pretium et, laoreet at lorem.
                  Curabitur non sollicitudin neque.
            </div>
            <AccordionContainer>
              <AccordionItem label="Item 1-A"  show={showItem1A}>
                <div>
                      <strong>This is the "A" item's accordion body inside first item body</strong> Lorem
                      ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu
                      rhoncus purus, vitae tincidunt nibh. Vivamus elementum egestas
                      ligula in varius. Proin ac erat pretium, ultricies leo at, cursus
                      ante. Pellentesque at odio euismod, mattis urna ac, accumsan
                      metus. Nam nisi leo, malesuada vitae pretium et, laoreet at lorem.
                      Curabitur non sollicitudin neque.
                </div>
              </AccordionItem>
              <AccordionItem label="Item 1-B" labelIsLink={true} href="" show={showItem1B}>
                <div>
                      <strong>This is the "B" item's accordion body inside first item body</strong> Lorem
                      ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu
                      rhoncus purus, vitae tincidunt nibh. Vivamus elementum egestas
                      ligula in varius. Proin ac erat pretium, ultricies leo at, cursus
                      ante. Pellentesque at odio euismod, mattis urna ac, accumsan
                      metus. Nam nisi leo, malesuada vitae pretium et, laoreet at lorem.
                      Curabitur non sollicitudin neque.
                </div>
              </AccordionItem>
              <AccordionItem label="Item 1-C" show={showItem1C}>
                <div>
                      <strong>This is the "C" item's accordion body inside first item body</strong> Lorem
                      ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu
                      rhoncus purus, vitae tincidunt nibh. Vivamus elementum egestas
                      ligula in varius. Proin ac erat pretium, ultricies leo at, cursus
                      ante. Pellentesque at odio euismod, mattis urna ac, accumsan
                      metus. Nam nisi leo, malesuada vitae pretium et, laoreet at lorem.
                      Curabitur non sollicitudin neque.
                </div>
              </AccordionItem>
            </AccordionContainer>
          </AccordionItem>
          <AccordionItem label="Item 2" show={showItem2}>
            <div>
                  <strong>This is the second item's accordion body.</strong> Lorem
                  ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu
                  rhoncus purus, vitae tincidunt nibh. Vivamus elementum egestas
                  ligula in varius. Proin ac erat pretium, ultricies leo at, cursus
                  ante. Pellentesque at odio euismod, mattis urna ac, accumsan
                  metus. Nam nisi leo, malesuada vitae pretium et, laoreet at lorem.
                  Curabitur non sollicitudin neque.
            </div>

            <AccordionContainer>
              <AccordionItem label="Item 2-A"  show={showItem2A}>
                <div>
                      <strong>This is the "A" item's accordion body inside second item body</strong> Lorem
                      ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu
                      rhoncus purus, vitae tincidunt nibh. Vivamus elementum egestas
                      ligula in varius. Proin ac erat pretium, ultricies leo at, cursus
                      ante. Pellentesque at odio euismod, mattis urna ac, accumsan
                      metus. Nam nisi leo, malesuada vitae pretium et, laoreet at lorem.
                      Curabitur non sollicitudin neque.
                </div>
              </AccordionItem>
              <AccordionItem label="Item 2-B" labelIsLink={true} href="" show={showItem2B}>
                <div>
                      <strong>This is the "B" item's accordion body inside decond item body</strong> Lorem
                      ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu
                      rhoncus purus, vitae tincidunt nibh. Vivamus elementum egestas
                      ligula in varius. Proin ac erat pretium, ultricies leo at, cursus
                      ante. Pellentesque at odio euismod, mattis urna ac, accumsan
                      metus. Nam nisi leo, malesuada vitae pretium et, laoreet at lorem.
                      Curabitur non sollicitudin neque.
                </div>
              </AccordionItem>
            </AccordionContainer>
          </AccordionItem>
          <AccordionItem label="Item 3" show={showItem3}>
            <div>
                  <strong>This is the third item's accordion body.</strong> Lorem
                  ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu
                  rhoncus purus, vitae tincidunt nibh. Vivamus elementum egestas
                  ligula in varius. Proin ac erat pretium, ultricies leo at, cursus
                  ante. Pellentesque at odio euismod, mattis urna ac, accumsan
                  metus. Nam nisi leo, malesuada vitae pretium et, laoreet at lorem.
                  Curabitur non sollicitudin neque.
            </div>
          </AccordionItem>
      </AccordionContainer>
    }>
      <div></div>
    </Layout>
  );
});

3. the page accordion-without-nested-accordion from the router on which it works properly (the same component), ./routes/accordion/without-nested-accordion.tsx

import { useSignal } from "@preact/signals";
import define from "$utils/fresh.ts";
import Layout from "$components/Layout.tsx";
import AccordionItem from "$islands/AccordionItem.tsx";
import AccordionContainer from "$components/AccordionContainer.tsx";

export default define.page(function PageAccordionWithoutNestedAccordion(/*{url}*/) {

  const showItem1 = useSignal(true);
  const showItem2 = useSignal(false);
  const showItem3 = useSignal(false);

  //console.log(url.pathname)
  return (
    <Layout navShow={true} navActive="/accordion" asideShow={true} aside={
        <AccordionContainer>
          <AccordionItem label="Item 1" labelIsLink={true} href="" show={showItem1}>
            <div>
                  <strong>This is the first item's accordion body.</strong> Lorem
                  ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu
                  rhoncus purus, vitae tincidunt nibh. Vivamus elementum egestas
                  ligula in varius. Proin ac erat pretium, ultricies leo at, cursus
                  ante. Pellentesque at odio euismod, mattis urna ac, accumsan
                  metus. Nam nisi leo, malesuada vitae pretium et, laoreet at lorem.
                  Curabitur non sollicitudin neque.
            </div>
          </AccordionItem>
          <AccordionItem label="Item 2" show={showItem2}>
            <div>
                  <strong>This is the second item's accordion body.</strong> Lorem
                  ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu
                  rhoncus purus, vitae tincidunt nibh. Vivamus elementum egestas
                  ligula in varius. Proin ac erat pretium, ultricies leo at, cursus
                  ante. Pellentesque at odio euismod, mattis urna ac, accumsan
                  metus. Nam nisi leo, malesuada vitae pretium et, laoreet at lorem.
                  Curabitur non sollicitudin neque.
            </div>
          </AccordionItem>
          <AccordionItem label="Item 3" show={showItem3}>
            <div>
                  <strong>This is the third item's accordion body.</strong> Lorem
                  ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu
                  rhoncus purus, vitae tincidunt nibh. Vivamus elementum egestas
                  ligula in varius. Proin ac erat pretium, ultricies leo at, cursus
                  ante. Pellentesque at odio euismod, mattis urna ac, accumsan
                  metus. Nam nisi leo, malesuada vitae pretium et, laoreet at lorem.
                  Curabitur non sollicitudin neque.
            </div>
          </AccordionItem>
      </AccordionContainer>
    }>
      <div></div>
    </Layout>
  );
});

---

---

---

Maybe it's my not understanding. I expected a different action. If my expectations were wrong, I don't quite understand what the problem is.

Thank you in advance for your support.