modus-accordion-state-management-solidjs

Modus Accordion State Management in SolidJS

🚨 IMPORTANT: Accordion State Management Guidelines

Key Principle: Modus Web Components (ModusWcAccordion, ModusWcCollapse) are designed to manage their own state, but they DO support controlled state when needed.

Best Practice: Use the expanded attribute on ModusWcCollapse components for initial state or programmatic control, but avoid trying to synchronize SolidJS state with Modus state in real-time.

❌ Common Anti-Patterns

❌ Real-time State Synchronization

// ❌ WRONG: Trying to sync SolidJS state with Modus state in real-time
function AccordionComponent() {
  const [isExpanded, setIsExpanded] = createSignal(false);

  return (
    <ModusWcAccordion
      onExpandedChange={(e) => setIsExpanded(e.detail.expanded)} // ❌ Creates state loop
    >
      <ModusWcCollapse expanded={isExpanded()}>
        {" "}
        {/* ❌ This causes conflicts */}
        <div slot="content">Content</div>
      </ModusWcCollapse>
    </ModusWcAccordion>
  );
}

❌ Complex State Synchronization

// ❌ WRONG: Complex state synchronization that can cause loops
function MyComponent() {
  const [accordionStates, setAccordionStates] = createSignal({
    accordion1: false,
    accordion2: true,
    accordion3: false,
  });

  const toggleAccordion = (id: string) => {
    setAccordionStates((prev) => ({
      ...prev,
      [id]: !prev[id],
    }));
  };

  return (
    <div>
      <For each={Object.entries(accordionStates())}>
        {([id, isExpanded]) => (
          <ModusWcAccordion
            onExpandedChange={() => toggleAccordion(id)} // ❌ Creates state loops
          >
            <ModusWcCollapse expanded={isExpanded}>
              {" "}
              {/* ❌ This can cause conflicts */}
              <div slot="content">Content for {id}</div>
            </ModusWcCollapse>
          </ModusWcAccordion>
        )}
      </For>
    </div>
  );
}

✅ Correct Patterns