Default handling of our drodpdowns doesn't make sense if there's a text input inside

[mlewand]

📝 Provide detailed reproduction steps (if any)

We recently faced this issue multiple times:

• Giphy plugin.
• OpenAI image plugin.
• Adding text input to the color picker feature.

https://user-images.githubusercontent.com/5353898/229112016-be9f7a23-ac5b-42cd-91fa-f6656c5854f6.mp4

Proving it requires some coding, to any dropdown add a text input field with:

private _createInput(): LabeledFieldView<InputTextView> {
		const labeledInput = new LabeledFieldView( this.locale, createLabeledInputText );
		const locale = this.locale;

		labeledInput.set( {
			label: locale!.t( 'HEX' ),
			class: 'color-picker-hex-input'
		} );

		labeledInput.fieldView.bind( 'value' ).to( this, 'color' );

		labeledInput.fieldView.on( 'input', () => {
			const inputValue = labeledInput.fieldView.element!.value;

			if ( inputValue ) {
				this._debounceColorPickerEvent( inputValue );
			}
		} );

		return labeledInput;
	}

Somewhere in your view constructor add this text input to your children list:

this.input = this._createInput();
const children = this.createCollection();
children.add( this.input );

	this.setTemplate( {
		tag: 'div',
		attributes: {
			class: [ 'ck', 'ck-color-picker' ]
		},
		children
	} );

✔️ Expected result

Ctrl+a should select entire text in the input.

Arrows key should work move the caret accordingly.

❌ Actual result

Ctrl+a doesn't work.

Left arrow key closes the dropdown.

❓ Possible solution

We do a following workarounds:

https://github.com/ckeditor/ckeditor5/blob/6325b271765d14ffc3921cd0a012edd2dc423848/packages/ckeditor5-media-embed/src/ui/mediaformview.ts#L175-L190

But this should not be needed.

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[mlewand]

There's another case related to that: cksource/ckeditor5-internal#3160 (handling ctrl + a ) related to selectstart event.

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).