5.16.9 breaks mouse events for nested React components in MDX (regression from #15150)

[cbliu1127]

Describe the Bug

In Astro 5.16.9, React components with mouse event handlers (e.g., onMouseDown, onMouseMove, onMouseUp) stop working when nested inside HTML elements in MDX files. This is a regression introduced by PR #15150.

Steps to Reproduce

In an MDX file:

<div className="wrapper">
  <InteractiveComponent 
    onMouseDown={(e) => console.log('mousedown')}
    onMouseMove={(e) => console.log('mousemove')}
    client:load
  />
</div>

InteractiveComponent.tsx:

export const InteractiveComponent = ({ onMouseDown, onMouseMove }) => {
  return (
    <div 
      onMouseDown={onMouseDown}
      onMouseMove={onMouseMove}
    >
      Drag me
    </div>
  );
};

Expected Behavior

• ✅ 5.16.8 and earlier: Mouse events work correctly
• ✅ 5.16.6: Mouse events work correctly

Actual Behavior

• ❌ 5.16.9: Mouse events do not fire, component renders static HTML without hydration

Root Cause Analysis

PR #15150 modified the array rendering logic in packages/astro/src/runtime/server/jsx.ts:

Before (5.16.8):

case Array.isArray(vnode):
  return markHTMLString(
    (await Promise.all(vnode.map((v: any) => renderJSX(result, v)))).join(''),
  );

After (5.16.9):

case Array.isArray(vnode): {
  const renderedItems = await Promise.all(vnode.map((v: any) => renderJSX(result, v)));
  let instructions: RenderInstruction[] | null = null;
  let content = '';
  for (const item of renderedItems) {
    if (item instanceof SlotString) {
      content += item;
      instructions = mergeSlotInstructions(instructions, item);
    } else {
      content += item;  // ← Components treated as plain strings
    }
  }
  // ...
}

The problem: When React components are nested in HTML elements within MDX, the children array processing now treats non-SlotString items as plain HTML strings, stripping the hydration mechanism (no <astro-island> tags are output).

Workaround

Move the className to the component props instead of wrapping in a div:

<InteractiveComponent 
  className="wrapper"
  onMouseDown={(e) => console.log('mousedown')}
  client:load
/>

This avoids the array processing logic that causes the issue.

Impact

• Breaks all React components with event handlers when nested in MDX
• Affects third-party components that cannot be easily modified
• Workaround is not always feasible (semantic HTML structure, layout requirements)

Environment

• Astro Version: 5.16.9
• Works in: 5.16.8, 5.16.6
• Related PR: Fix hydration for framework components in MDX slots #15150 (fix for MDX slot hydration)

Suggested Fix

The array rendering logic should preserve hydration for all rendered components, not just SlotString instances. The fix for MDX slots inadvertently broke non-slot scenarios.

[FredKSchott]

Testing some AI triage analysis. It failed to reproduce this issue, but still sharing for posterity.

Summary

I was NOT able to reproduce this issue. Using Astro 5.16.9 with React components nested inside HTML elements in MDX files, both mouse events and click events work correctly after hydration. All components properly receive <astro-island> tags and hydrate as expected.

Cause: Unknown - the issue could not be reproduced with the provided reproduction steps.

Impact: If real, this would affect all React components with event handlers nested in HTML elements within MDX files.

Fix: No fix developed - the bug could not be confirmed.

---

Reproduction Details

Environment

• Astro: 5.16.9
• @astrojs/mdx: 4.0.8
• @astrojs/react: 4.2.1
• React: 19.0.0
• Node.js: v22.13.0
• Package Manager: npm 10.9.2

Steps to Reproduce

1. Created a new Astro project using npm create astro@latest -- --template minimal
2. Installed dependencies: astro@5.16.9, @astrojs/mdx, @astrojs/react, react, react-dom
3. Created a React component with mouse event handlers:

// src/components/InteractiveComponent.tsx
import { useState } from 'react';

export const InteractiveComponent = ({ className }: { className?: string }) => {
  const [lastEvent, setLastEvent] = useState<string>('No event yet');
  const [count, setCount] = useState(0);

  const handleMouseDown = (e: React.MouseEvent) => {
    console.log('mousedown fired!');
    setLastEvent('mousedown');
    setCount((c) => c + 1);
  };

  return (
    <div
      onMouseDown={handleMouseDown}
      className={className}
      style={{ padding: '20px', border: '2px solid blue', cursor: 'pointer' }}
    >
      <div>Drag me - Interactive Component</div>
      <div>Last event: {lastEvent}</div>
      <div>Event count: {count}</div>
    </div>
  );
};

4. Created an MDX file with nested and root-level components:

// src/pages/test.mdx
import { InteractiveComponent } from '../components/InteractiveComponent.tsx';

# Mouse Event Test

## Test 1: Component nested in a div

<div className="wrapper" style={{ padding: '10px', border: '2px solid red' }}>
  <InteractiveComponent client:load />
</div>

## Test 2: Component at root level

<InteractiveComponent className="wrapper" client:load />

5. Built and served the project: npm run build && npm run preview

Expected Result (per issue)

• Nested component should fail to hydrate and not respond to mouse events
• Root-level component should work correctly

Actual Result

• Both components work correctly
• Both have <astro-island> tags in the generated HTML
• Both hydrate properly on page load
• Both respond to mouse events (click, mousedown, mousemove, mouseup)
• Event counts update correctly when interacting with either component

Additional Tests Performed

1. Multiple nested components - Created a page with 3 React components nested in a wrapper div plus 2 at root level. All 5 components received <astro-island> tags and worked correctly.

2. Astro slot wrappers - Tested components inside Astro components using <slot /> and Astro.slots.render(). All hydrated correctly.

3. Click handlers - Created a button component with click handlers. Both nested and root-level buttons worked correctly.

How to Fix (Maintainers)

A maintainer patch is not available because the issue could not be reproduced.

Possible Explanations

1. Missing reproduction details - The issue reporter may be using a specific configuration, integration, or code pattern not captured in the reproduction steps.

2. Fixed in a later patch - The current npm version 5.16.9 may include fixes not present when the issue was filed.

3. Environment-specific - The issue may only occur with specific package manager versions, Node.js versions, or operating systems.

Recommended Next Steps

1. Ask the issue reporter for a complete reproduction repository
2. Verify the exact versions of all packages in the reporter's environment
3. Check if there's a specific MDX/React configuration that triggers the issue
4. Look for related issues that might provide additional context

How to Patch (Users)

A user patch is not available because the issue could not be reproduced.

If you're experiencing this issue:

1. Ensure you're on the latest Astro 5.x version
2. Try clearing your node_modules and reinstalling dependencies
3. Check if the issue persists in a minimal reproduction
4. Provide a complete reproduction repository in the GitHub issue

This report was made by an LLM. Mistakes happen, check important info.