Merge pull request #13990 from ckeditor/ck/13982-better-handling-of-c…

…trl-a-in-input-in-dropdown-view

Fix (ui): Select all (Ctrl+A) should now be enabled by default in input field placed in dropdown panel. Closes #13982.

packages/ckeditor5-find-and-replace/src/ui/findandreplaceformview.ts

@@ -725,16 +725,6 @@ export default class FindAndReplaceFormView extends View {
  this._keystrokes.set( 'arrowleft', stopPropagation );
  this._keystrokes.set( 'arrowup', stopPropagation );
  this._keystrokes.set( 'arrowdown', stopPropagation );
-
- // Intercept the `selectstart` event, which is blocked by default because of the default behavior
- // of the DropdownView#panelView. This blocking prevents the native select all on Ctrl+A.
- this.listenTo( this._findInputView.element!, 'selectstart', ( evt, domEvt ) => {
- domEvt.stopPropagation();
- }, { priority: 'high' } );
-
- this.listenTo( this._replaceInputView.element!, 'selectstart', ( evt, domEvt ) => {
- domEvt.stopPropagation();
- }, { priority: 'high' } );
  }
 
  /**

packages/ckeditor5-find-and-replace/tests/ui/findandreplaceformview.js

@@ -482,32 +482,6 @@ describe( 'FindAndReplaceFormView', () => {
  sinon.assert.callCount( keyEvtData.stopPropagation, 4 );
  } );
 
- it( 'intercepts the "selectstart" in the #findInputView with the high priority to unlock select all', () => {
- const spy = sinon.spy();
- const event = new Event( 'selectstart', {
- bubbles: true,
- cancelable: true
- } );
-
- event.stopPropagation = spy;
-
- view._findInputView.element.dispatchEvent( event );
- sinon.assert.calledOnce( spy );
- } );
-
- it( 'intercepts the "selectstart" in the #replaceInputView with the high priority to unlock select all', () => {
- const spy = sinon.spy();
- const event = new Event( 'selectstart', {
- bubbles: true,
- cancelable: true
- } );
-
- event.stopPropagation = spy;
-
- view._replaceInputView.element.dispatchEvent( event );
- sinon.assert.calledOnce( spy );
- } );
-
  it( 'handles F3 keystroke and extecutes find next', () => {
  const keyEvtData = {
  keyCode: keyCodes.f3,

packages/ckeditor5-image/src/imageinsert/ui/imageinsertpanelview.ts

@@ -181,13 +181,6 @@ export default class ImageInsertPanelView extends View {
  this.keystrokes.set( 'arrowleft', stopPropagation );
  this.keystrokes.set( 'arrowup', stopPropagation );
  this.keystrokes.set( 'arrowdown', stopPropagation );
-
- // Intercept the "selectstart" event, which is blocked by default because of the default behavior
- // of the DropdownView#panelView.
- // TODO: blocking "selectstart" in the #panelView should be configurable per–drop–down instance.
- this.listenTo( childViews[ 0 ].element!, 'selectstart', ( evt, domEvt ) => {
- domEvt.stopPropagation();
- }, { priority: 'high' } );
  }
 
  /**

packages/ckeditor5-image/tests/imageinsert/ui/imageinsertpanelview.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* globals document, Event */
+/* globals document */
 
 import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfield/labeledfieldview';
 
@@ -214,19 +214,6 @@ describe( 'ImageInsertPanelView', () => {
  sinon.assert.callCount( keyEvtData.stopPropagation, 4 );
  } );
 
- it( 'intercepts the "selectstart" event of the first integration element with the high priority', () => {
- const spy = sinon.spy();
- const event = new Event( 'selectstart', {
- bubbles: true,
- cancelable: true
- } );
-
- event.stopPropagation = spy;
-
- view.getIntegration( 'insertImageViaUrl' ).element.dispatchEvent( event );
- sinon.assert.calledOnce( spy );
- } );
-
  describe( 'activates keyboard navigation for the toolbar', () => {
  it( 'so "tab" focuses the next focusable item', () => {
  const keyEvtData = {

packages/ckeditor5-list/src/listproperties/ui/listpropertiesview.ts

@@ -212,13 +212,6 @@ export default class ListPropertiesView extends View {
  this.focusables.add( this.startIndexFieldView );
  this.focusTracker.add( this.startIndexFieldView.element! );
 
- // Intercept the `selectstart` event, which is blocked by default because of the default behavior
- // of the DropdownView#panelView.
- // TODO: blocking `selectstart` in the #panelView should be configurable per–drop–down instance.
- this.listenTo( this.startIndexFieldView.element!, 'selectstart', ( evt, domEvt ) => {
- domEvt.stopPropagation();
- }, { priority: 'high' } );
-
  const stopPropagation = ( data: Event ) => data.stopPropagation();
 
  // Since the form is in the dropdown panel which is a child of the toolbar, the toolbar's

packages/ckeditor5-list/tests/listproperties/ui/listpropertiesview.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* globals document, Event */
+/* globals document */
 
 import ListPropertiesView from '../../../src/listproperties/ui/listpropertiesview';
 import CollapsibleView from '../../../src/listproperties/ui/collapsibleview';
@@ -567,19 +567,6 @@ describe( 'ListPropertiesView', () => {
  view.keystrokes.press( keyEvtData );
  sinon.assert.callCount( keyEvtData.stopPropagation, 4 );
  } );
-
- it( 'intercepts the "selectstart" in the #startIndexFieldView with the high priority to unlock select all', () => {
- const spy = sinon.spy();
- const event = new Event( 'selectstart', {
- bubbles: true,
- cancelable: true
- } );
-
- event.stopPropagation = spy;
-
- view.startIndexFieldView.element.dispatchEvent( event );
- sinon.assert.calledOnce( spy );
- } );
  } );
  } );
 

packages/ckeditor5-media-embed/src/ui/mediaformview.ts

@@ -181,13 +181,6 @@ export default class MediaFormView extends View {
  this.keystrokes.set( 'arrowleft', stopPropagation );
  this.keystrokes.set( 'arrowup', stopPropagation );
  this.keystrokes.set( 'arrowdown', stopPropagation );
-
- // Intercept the `selectstart` event, which is blocked by default because of the default behavior
- // of the DropdownView#panelView.
- // TODO: blocking `selectstart` in the #panelView should be configurable per–drop–down instance.
- this.listenTo( this.urlInputView.element!, 'selectstart', ( evt, domEvt ) => {
- domEvt.stopPropagation();
- }, { priority: 'high' } );
  }
 
  /**

packages/ckeditor5-media-embed/tests/ui/mediaformview.js

@@ -211,19 +211,6 @@ describe( 'MediaFormView', () => {
  view.keystrokes.press( keyEvtData );
  sinon.assert.callCount( keyEvtData.stopPropagation, 4 );
  } );
-
- it( 'intercepts the "selectstart" event of the #urlInputView with the high priority', () => {
- const spy = sinon.spy();
- const event = new Event( 'selectstart', {
- bubbles: true,
- cancelable: true
- } );
-
- event.stopPropagation = spy;
-
- view.urlInputView.element.dispatchEvent( event );
- sinon.assert.calledOnce( spy );
- } );
  } );
 
  describe( 'destroy()', () => {

packages/ckeditor5-ui/src/dropdown/dropdownpanelview.ts

@@ -77,7 +77,13 @@ export default class DropdownPanelView extends View implements DropdownPanelFocu
  on: {
  // Drag and drop in the panel should not break the selection in the editor.
  // https://github.com/ckeditor/ckeditor5-ui/issues/228
- selectstart: bind.to( evt => evt.preventDefault() )
+ selectstart: bind.to( evt => {
+ if ( ( evt.target as HTMLElement ).tagName.toLocaleLowerCase() === 'input' ) {
+ return;
+ }
+
+ evt.preventDefault();
+ } )
  }
  } );
  }

packages/ckeditor5-ui/tests/dropdown/dropdownpanelview.js

@@ -9,6 +9,7 @@ import ViewCollection from '../../src/viewcollection';
 import DropdownPanelView from '../../src/dropdown/dropdownpanelview';
 import View from '../../src/view';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+import { LabeledFieldView, createLabeledInputText } from '@ckeditor/ckeditor5-ui';
 
 describe( 'DropdownPanelView', () => {
  let view, locale;
@@ -70,6 +71,21 @@ describe( 'DropdownPanelView', () => {
  view.element.dispatchEvent( event );
  sinon.assert.calledOnce( spy );
  } );
+
+ it( 'does not get preventDefault called for the input field', () => {
+ const labeledInput = new LabeledFieldView( { t: () => {} }, createLabeledInputText );
+
+ view.children.add( labeledInput );
+
+ const event = new Event( 'selectstart', {
+ bubbles: true,
+ cancelable: true
+ } );
+ const spy = sinon.spy( event, 'preventDefault' );
+
+ labeledInput.fieldView.element.dispatchEvent( event );
+ sinon.assert.notCalled( spy );
+ } );
  } );
  } );
  } );