[Feature] Popover: Support for Complex Trigger Elements in Popover.Trigger

[joseerobless]

Feature request

Overview

Summary

Request for enhanced Popover.Trigger functionality to support composite UI elements (like input fields with trigger buttons) while maintaining proper accessibility standards.

Current Limitation

Popover.Trigger is designed to work with single button elements. When developers need composite triggers (such as date pickers with text input + calendar button), they must use workarounds that can create accessibility issues.

Use Case

Many modern UI patterns require composite triggers:

Date/Time Pickers: Text input for manual entry + calendar button for picker
Comboboxes: Text input for typing + dropdown button
File Uploads: Display field + browse button

Current Workaround and Issues

Developers currently wrap composite elements in Popover.Trigger with asChild:

<Popover.Trigger asChild>
  <div ref={triggerRef}>
    <TextInput /> {/* User can type dates */}
    <DatePickerIcon /> {/* Button to open calendar */}
  </div>
</Popover.Trigger>

Problems with this approach:

• The wrapper div receives [type="button"], aria-expanded, aria-haspopup attributes
• Creates invalid HTML: <div type="button">
• Accessibility violations: non-interactive elements with button semantics
• Requires manual cleanup with mutation observers

Requested Feature

Enhanced Popover.Trigger that can:

Option 1: Target Specific Child Element

<Popover.Trigger asChild target="[data-trigger]">
  <div>
    <TextInput />
    <button data-trigger>📅</button> {/* Only this gets trigger attributes */}
  </div>
</Popover.Trigger>

Option 2: Render Props for Manual Control

<Popover.Trigger asChild smartTarget>
  <div>
    <TextInput />
    <button>📅</button> {/* Auto-detected as trigger */}
  </div>
</Popover.Trigger>

Benefits

• Maintains current API: Existing button-only usage unchanged
• Enables complex patterns: Supports modern composite UI elements
• Improves accessibility: Proper ARIA attributes on correct elements
• Reduces workarounds: Eliminates need for mutation observers and manual cleanup
• Better DX: More intuitive API for complex use cases

Alternative Consideration

If this extends beyond Popover's intended scope, perhaps a new component like Popover.CustomTrigger could handle these use cases while keeping the existing Popover.Trigger focused on simple button scenarios - this is the approach HeroUI's taking.

Examples in other libraries

HeroUI

Who does this impact? Who is this for?

This feature's for all users

[chaance]

Closing for now since this is beyond the planned scope at this time. I'll update the thread and reopen if we decide to tackle it in the future.