[EuiComboBox] Pasting a delimited/copied list of values doesn't create multiple options

[shahzad31]

Summary

When EuiComboBox is given a delimiter, pasting a delimited (or copied multi-value) string does not reliably create one option per value. In common cases it collapses everything into a single option/pill. Copy→paste of a list of tags is a very frequent user expectation, so it would be great if EuiComboBox handled it natively when a delimiter is configured.

EUI version: 116.5.0
Component: EuiComboBox

Current behavior

Two separate problems combine to break paste:

1. The search field is a single-line <input>, which sanitizes pasted text before EUI sees it.
   In combo_box_input.tsx the input only receives values via onChange(event.target.value). Per the HTML value-sanitization algorithm, a single-line <input> strips/normalizes newlines. So when a user copies rendered tag badges (block-level elements, which land on the clipboard newline-separated) and pastes them, the newlines are gone (stripped, or collapsed to spaces depending on browser) before onChange/onSearchChange runs. The delimiter is destroyed and the whole thing becomes one value. Even a delimiter="," doesn't help, because the pasted text never contained commas.

2. The delimiter split path calls onCreateOption once per value in a synchronous loop.
   In combo_box.tsx, setCustomOptions (called on Enter/blur, and from onSearchChange when the value endsWith(delimiter)) does:

   values.forEach((option) => addCustomOption(isContainerBlur, option));

   Each addCustomOption calls onCreateOption(value, ...). Consumers that derive the next state from a captured/controlled value (react-hook-form field.onChange, useReducer dispatch, setState([...prev, x]) with a stale closure) end up dropping all but the last value, because the loop runs synchronously before any re-render.

Expected behavior

When delimiter is provided, pasting a list of values should create one option/pill per value in a single update — including when the clipboard is newline-separated (the natural result of copying rendered pills/badges).

Reproduction

1. Render an EuiComboBox with delimiter=",", onCreateOption, and a controlled selectedOptions (e.g. via react-hook-form).
2. Copy several rendered tags/badges (or any newline-separated list) to the clipboard.
3. Focus the combo box and paste, then blur/Enter.

Actual: a single option containing the concatenated text (e.g. tag1tag2tag3 or tag1 tag2 tag3).
Expected: tag1, tag2, tag3 as separate options.

Proposal

• Add an onPaste handler in EuiComboBoxInput that, when delimiter is set, reads the raw clipboardData.getData('text') before the input sanitizes it, splits on the configured delimiter and newlines, and creates all resulting options in one pass (calling preventDefault()).
• To avoid the stale-closure problem when creating multiple options at once, either batch the created values and surface them together (e.g. a single onCreateOption(values: string[]) / multi-create callback), or have EUI accumulate the created options internally before invoking the consumer once.

Context

Real-world case: users copy tags from an existing item (rendered as badges) and paste them into a new item's tags field; they end up with one giant tag. We're currently working around this in Kibana by adding a per-consumer onPaste handler that reads the raw clipboard and splits on /[\n\r,]+/, but this really belongs in EuiComboBox when a delimiter is provided.

[shahzad31]

Related pain point on the copy side (the counterpart to the paste problem above): it's currently very hard to select/copy tag text from within an EuiComboBox, because the component grabs focus back to its search input on any click.

onComboBoxClick fires on any click inside the box — including the mouseup that ends a drag-select — and unconditionally focuses the search input:

onComboBoxClick = () => {
  // When the user clicks anywhere on the box, enter the interaction state.
  this.searchInputRefInstance?.focus();
  ...
};

So if a user drag-selects across the pills to copy them, on mouseup the input is focused, which collapses the document text selection and drops the caret into the input. Combined with the fact that the pills aren't selectable text (and there's no Cmd/Ctrl+A handling), there's effectively no way to copy multiple tags out of the combo box. This is why users copy from the rendered badges elsewhere in the UI (which land on the clipboard newline-separated) and then hit the paste problem described above.

Would be great if a fix here considered the round trip:

• Copy: allow selecting/copying the pill values from within the combo box (e.g. don't steal focus on a drag-select, and/or support Cmd/Ctrl+C to copy the selected/all pills as a delimited string).
• Paste: the onPaste/delimiter handling proposed above.

[mgadewoll]

I'll add some thoughts for the requested changes:

1. Support for pasting lists with new lines \n

This is currently already partially supported. If delimiter is set and a list with the delimiter is pasted, then also new lines are supported as they are filtered out. What is currently not yet supported is a split on only new lines. That was likely on purpose, considering only the delimiter value is used as valid separator.

ℹ️ That being said, I think it's valid to include new lines as default valid separator.

✅ currently working

/* inline list with delimiters */

// INPUT (copied)
item 1, item 3, item 5

// OUTPUT (pasted)
item 1, item 3, item 5

/* multi-line list with delimiters (+ new lines) */

// INPUT (copied)
item 1,
item 3,
item 5

// OUTPUT (pasted)
item 1, item 3, item 5

❌ currently not working

/* multi-line list without delimiters (+ new lines) */

// INPUT (copied)
item 1
item 3
item 5

// OUTPUT (pasted)
item 1 item 3 item 5

2. Possible stale closure on multiple onCreateOption calls

There are different ways to approach this, non is super clean:

1. keep as is and document expected usage

• 👎 doesn't work for 3rd party code that doesn't provide functional updaters (e.g. react-hook-form's field.onChange)

2. add a new callback prop, e.g. onCreateDelimitedOptions that's called once with all combined options

• 👍 Non breaking, opt-in
• 🆗 requires consumers to use the correct prop per use case

3. Change the onCreateOption API to string | string []

• 👍 Single prop
• 👎 Breaking type change, requires consumer updates

4. Change the onCreateOption API to include an optional string [] parameter

• 👍 Non breaking, opt-in
• 🆗 requires consumers to use the correct prop per use case
• 👎 the singular searchValue and additional searchValues might be confusing/misleading

3. Support for copying pills

As correctly stated, this is currently prevented due to the automatic focus management on click. I think we could just check if a getSelection is in progress and conditionally focus the input if not.

Combined with the updates from 1) to support new lines this would then support a possible circular copy-paste behavior.

Screen.Recording.2026-07-15.at.15.00.50.mov

[MannXo]

Interested in working on this.