elastic / elastic/eui

[Epic] Trigger-based popover menus in text-areas

Open
#9,543 0 comments 0 reactions 0 assignees View on GitHub
draft meta
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

# Pattern: Trigger-based popover menus in text areas (mentions, slash commands, resource pickers)

## Summary

Multiple teams are independently building the same interaction pattern — a popover menu triggered by a character sequence (e.g. `@`, `/`) inside a text area, anchored to the cursor position. There is no shared EUI component or documented pattern for this today.

### Known implementations

- **ES|QL editor** — `@kbn/esql-resource-browser` (resource autocomplete in Monaco)
- **Agent Builder** — custom `contenteditable` div + `EuiPopover` anchored to trigger sequences ([PR #252785](https://github.com/elastic/kibana/pull/252785))
- **Workflows** — trigger-from-input UI elements (details TBD)

## Problem

Each team is solving the same UX problem with different approaches, leading to inconsistent behavior, duplicated effort, and no shared accessibility or interaction standards. As more surfaces adopt chat and agent UIs, this gap will grow.

## Proposed scope

1. **Document a pattern** on the EUI site (similar to [Nested Drag and Drop](https://eui.elastic.co/docs/patterns/nested-drag-and-drop/)) covering the interaction model, visual spec, and accessibility expectations.
2. **Evaluate extracting a shared utility** (e.g. a Kibana shared plugin) from the existing Agent Builder implementation for non-Monaco text areas.
3. **Audit existing usages** across ES|QL editor, Agent Builder, and Workflows for consistency gaps.

## Notes

- Monaco-based editors and standard text areas require architecturally different solutions, so a single component may not be feasible. The pattern doc should cover both paths.
- Given Elastic's agentic direction, this pattern will see increasing adoption. Slotted as a sweep topic after tables/tooltips.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.