modus-select-vs-dropdown-menu-solidjs

ModusSelect vs ModusDropdownMenu in SolidJS

🚨 CRITICAL: ModusSelect Reliability Issues

Problem: ModusSelect component has unreliable event handling in SolidJS applications, especially with Chrome DevTools automation and testing.

Root Cause: ModusSelect events are inconsistent and may not fire reliably in SolidJS environments.

Solution: Use ModusDropdownMenu with itemSelect events, which are more reliable and consistent.

❌ Common Anti-Patterns

❌ Using ModusSelect (Unreliable)

// ❌ WRONG: ModusSelect with unreliable events
function UnreliableSelect() {
  const [selectedValue, setSelectedValue] = createSignal("");

  const options = [
    { label: "Option 1", value: "option1" },
    { label: "Option 2", value: "option2" },
    { label: "Option 3", value: "option3" },
  ];

  const handleInputChange = (event: CustomEvent<InputEvent>) => {
    // ❌ This event may not fire reliably in SolidJS
    console.log("Select changed:", event.target.value);
    setSelectedValue(event.target.value);
  };

  return (
    <ModusSelect
      options={options}
      value={selectedValue}
      onInputChange={handleInputChange} // ❌ Unreliable event
      label="Select an option"
    />
  );
}

❌ Direct Event Handling

// ❌ WRONG: Direct event handling
function DirectEventHandling() {
  const options = [
    { label: "Option 1", value: "1" },
    { label: "Option 2", value: "2" },
  ];

  const handleInputChange = (event: CustomEvent<InputEvent>) => {
    // ❌ This may not work consistently in SolidJS
    const value = event.target.value;
    console.log("Selected:", value);
  };

  return <ModusSelect options={options} onInputChange={handleInputChange} />;
}

✅ Correct Patterns

✅ Use ModusDropdownMenu (Reliable)

// ✅ CORRECT: ModusDropdownMenu with reliable events
function ReliableDropdown() {
  const [selectedValue, setSelectedValue] = createSignal("");
  const [isOpen, setIsOpen] = createSignal(false);
  let dropdownRef: HTMLModusWcDropdownMenuElement | undefined;

  const handleItemSelect = (event: CustomEvent<{ value: string }>) => {
    // ✅ CORRECT: Reliable itemSelect event
    const value = event.detail.value;
    console.log("Item selected:", value);
    setSelectedValue(value);
    setIsOpen(false);
  };

  const toggleDropdown = () => {
    if (dropdownRef) {
      dropdownRef.menuVisible = !isOpen();
      setIsOpen(!isOpen());
    }
  };

  const menuItems = [
    { label: "Option 1", value: "option1" },
    { label: "Option 2", value: "option2" },
    { label: "Option 3", value: "option3" },
  ];

  return (
    <ModusDropdownMenu
      ref={(el: HTMLModusWcDropdownMenuElement) => (dropdownRef = el)}
      menuVisible={isOpen()}
      onItemSelect={handleItemSelect}
      buttonContent={
        <ModusWcButton onClick={toggleDropdown}>
          {selectedValue() || "Select an option"}
        </ModusWcButton>
      }
      menuItems={menuItems}
    />
  );
}