#Changes in component are not visible until parent component is saved

2 messages · Page 1 of 1 (latest)

scarlet tapir
#

Hi there, not sure exactly what am i doing wrong here
I have Faq component

export const Faq = component$(() => {
  return (
    <div class="mt-10">
      <h2 class="text-xl lg:text-2xl font-bold">Faq</h2>
      <Details title="blah blah">
        blah blah blah
      </Details>
    </div>
  );
});

and Details component

export const Details = component$(({ title, open }: Props) => {
  const contentRef = useSignal<HTMLDivElement>();
  const isOpen = useSignal(open ?? false);

  const onSummary = $((ev: QwikMouseEvent<HTMLElement, MouseEvent>) => {
    const elem = ev.target as HTMLElement;
    if (!isOpen.value) {
      scrollIntoView(elem.parentElement!, { time: 350, maxSynchronousAlignments: 1, align: { top: 0 } });
    }
    isOpen.value = !isOpen.value;
  });

  return (
    <details class="group bg-base-200 rounded-2xl mt-6" open={open}>
      <summary class="flex justify-between items-center text-xl font-medium cursor-pointer list-none px-4 py-4" onClick$={onSummary}>
        <span class="pr-4">{title}</span>
        <span class="transition group-open:rotate-180">
          <svg
            fill="none"
            height="24"
            shape-rendering="geometricPrecision"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1.5"
            viewBox="0 0 24 24"
            width="24"
          >
            <path d="M6 9l6 6 6-6"></path>
          </svg>
        </span>
      </summary>
      <div class="transition-all duration-1000 px-4 pb-4" ref={contentRef}>
        <Slot />
      </div>
    </details>
  );
});

If i make some changed in Details component they are not visible untill i also resave Faq component

Is it supposed to be like that?

#

Changes in component are not visible until parent component is saved