From 76e249e983319254dc8d865ff6b0e1e8ab3ca9b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomek=20Wytr=C4=99bowicz?= <tomalecpub@gmail.com>
Date: Wed, 6 May 2020 15:24:16 +0200
Subject: [PATCH 01/11] Document the return value for
 InputTextView._createInputTextView.

Rename  to  to reduce the confusion with an  event or native element.
---
 .../ckeditor5-table/src/ui/colorinputview.js  | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/ckeditor5-table/src/ui/colorinputview.js b/packages/ckeditor5-table/src/ui/colorinputview.js
index 48164ac6524..575ffc64ac2 100644
--- a/packages/ckeditor5-table/src/ui/colorinputview.js
+++ b/packages/ckeditor5-table/src/ui/colorinputview.js
@@ -186,25 +186,26 @@ export default class ColorInputView extends View {
 	}
 
 	/**
-	 * Creates and configures the {@link #_inputView}.
+	 * Creates and configures an instance of {@link module:ui/inputtext/inputtextview~InputTextView}.
 	 *
 	 * @private
+	 * @returns {module:ui/inputtext/inputtextview~InputTextView} A configured instance to be set as {@link #_inputView}.
 	 */
 	_createInputTextView() {
 		const locale = this.locale;
-		const input = new InputTextView( locale );
+		const inputView = new InputTextView( locale );
 
-		input.bind( 'value' ).to( this );
-		input.bind( 'isReadOnly' ).to( this );
-		input.bind( 'hasError' ).to( this );
+		inputView.bind( 'value' ).to( this );
+		inputView.bind( 'isReadOnly' ).to( this );
+		inputView.bind( 'hasError' ).to( this );
 
-		input.on( 'input', () => {
-			this.value = input.element.value;
+		inputView.on( 'input', () => {
+			this.value = inputView.element.value;
 		} );
 
-		input.delegate( 'input' ).to( this );
+		inputView.delegate( 'input' ).to( this );
 
-		return input;
+		return inputView;
 	}
 
 	/**

From 779d3fcd29eb96bced96b816f09901e544c5146d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomek=20Wytr=C4=99bowicz?= <tomalecpub@gmail.com>
Date: Wed, 6 May 2020 15:41:44 +0200
Subject: [PATCH 02/11] Fix the JSDoc path for InputTextView#_inputView type.

---
 packages/ckeditor5-table/src/ui/colorinputview.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ckeditor5-table/src/ui/colorinputview.js b/packages/ckeditor5-table/src/ui/colorinputview.js
index 575ffc64ac2..baa647d7e16 100644
--- a/packages/ckeditor5-table/src/ui/colorinputview.js
+++ b/packages/ckeditor5-table/src/ui/colorinputview.js
@@ -101,7 +101,7 @@ export default class ColorInputView extends View {
 		 * An instance of the input allowing the user to type a color value.
 		 *
 		 * @protected
-		 * @member {module:ui/dropdown/dropdown~DropdownView}
+		 * @member {module:ui/inputtext/inputtextview~InputTextView}
 		 */
 		this._inputView = this._createInputTextView( locale );
 

From fcfb18bf12f900f2d2745abd207345b7d0195b38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomek=20Wytr=C4=99bowicz?= <tomalecpub@gmail.com>
Date: Wed, 6 May 2020 16:40:50 +0200
Subject: [PATCH 03/11] Add tests for #6241 - displaying a defined color label.

---
 .../tests/ui/colorinputview.js                | 71 +++++++++++++++++++
 1 file changed, 71 insertions(+)

diff --git a/packages/ckeditor5-table/tests/ui/colorinputview.js b/packages/ckeditor5-table/tests/ui/colorinputview.js
index 6c9b3d903e1..44ad7d649ec 100644
--- a/packages/ckeditor5-table/tests/ui/colorinputview.js
+++ b/packages/ckeditor5-table/tests/ui/colorinputview.js
@@ -146,6 +146,14 @@ describe( 'ColorInputView', () => {
 				expect( view.value ).to.equal( 'rgb(0,0,255)' );
 			} );
 
+			it( 'should set input text #value to the selected color\'s label upon #execute', () => {
+				expect( inputView.value ).to.equal( '' );
+
+				colorGridView.items.last.fire( 'execute' );
+
+				expect( inputView.value ).to.equal( 'Blue' );
+			} );
+
 			it( 'should close the dropdown upon #execute', () => {
 				view._dropdownView.isOpen = true;
 
@@ -208,6 +216,15 @@ describe( 'ColorInputView', () => {
 				expect( inputView.value ).to.equal( 'bar' );
 			} );
 
+			it( `when the color input value is set to one of defined colors, 
+			should use its label as the text input value`, () => {
+				view.value = 'rgb(0,255,0)';
+				expect( inputView.value ).to.equal( 'Green' );
+
+				view.value = 'rgb(255,0,0)';
+				expect( inputView.value ).to.equal( 'Red' );
+			} );
+
 			it( 'should have #isReadOnly bound to the color input', () => {
 				view.isReadOnly = true;
 				expect( inputView.isReadOnly ).to.equal( true );
@@ -236,6 +253,60 @@ describe( 'ColorInputView', () => {
 				expect( view.value ).to.equal( 'bar' );
 			} );
 
+			it( `when any defined color label is given as the text input #value (case-sensitive),
+			should set the color as #value on #input event`, () => {
+				inputView.element.value = 'Red';
+				inputView.fire( 'input' );
+
+				expect( view.value ).to.equal( 'rgb(255,0,0)' );
+
+				inputView.element.value = 'Green';
+				inputView.fire( 'input' );
+
+				expect( view.value ).to.equal( 'rgb(0,255,0)' );
+
+				inputView.element.value = 'blue';
+				inputView.fire( 'input' );
+
+				expect( view.value ).to.equal( 'blue' );
+			} );
+
+			it( `when any defined color label is given as the text input #value (case-sensitive),
+			then a non-defined value is set to the color input, 
+			the latter value should be set to text input`, () => {
+				inputView.element.value = 'Red';
+				inputView.fire( 'input' );
+
+				expect( view.value ).to.equal( 'rgb(255,0,0)' );
+
+				
+				view.value = 'rgb(0,0,255)';
+
+				expect( view.value ).to.equal( 'rgb(0,0,255)' );
+			} );
+
+			it( `when any defined color value is given as the text input #value (case-sensitive),
+			its value should be set to color and text inputs after input event`, () => {
+				inputView.element.value = 'rgb(255,0,0)';
+				inputView.fire( 'input' );
+
+				expect( view.value ).to.equal( 'rgb(255,0,0)' );
+				expect( inputView.element.value ).to.equal( 'rgb(255,0,0)' );
+			} );
+
+			it( `when any defined color value is given as the text input #value (case-sensitive),
+			its label should be set to text inputs after blur event on input view input element`, () => {
+				inputView.element.value = 'rgb(255,0,0)';
+
+				inputView.fire( 'input' );
+
+				expect( inputView.element.value ).to.equal( 'rgb(255,0,0)' );
+
+				inputView.element.dispatchEvent( new Event( 'blur' ) );
+
+				expect( inputView.element.value ).to.equal( 'Red' );
+			} );
+
 			it( 'should have #input event delegated to the color input', () => {
 				const spy = sinon.spy();
 				view.on( 'input', spy );

From 543adbc9092e42163c27fef1412837d7bc6419e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomek=20Wytr=C4=99bowicz?= <tomalecpub@gmail.com>
Date: Wed, 6 May 2020 16:44:17 +0200
Subject: [PATCH 04/11] Display a defined color label in text input field.
 Closes #6241.

---
 .../ckeditor5-table/src/ui/colorinputview.js  | 53 +++++++++++++++++--
 .../src/inputtext/inputtextview.js            |  6 ++-
 2 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/packages/ckeditor5-table/src/ui/colorinputview.js b/packages/ckeditor5-table/src/ui/colorinputview.js
index baa647d7e16..76797d1f8e8 100644
--- a/packages/ckeditor5-table/src/ui/colorinputview.js
+++ b/packages/ckeditor5-table/src/ui/colorinputview.js
@@ -105,6 +105,16 @@ export default class ColorInputView extends View {
 		 */
 		this._inputView = this._createInputTextView( locale );
 
+		/**
+		 * The flag that indicates whether the user is still typing.
+		 * If set to true, it means that the text input field ({@link #_inputView}) still has the focus.
+		 * So, we should interrupt the user by replacing the input's value.
+		 * 
+		 * @protected
+		 * @member {Boolean}
+		 */
+		this._stillTyping = false;
+
 		this.setTemplate( {
 			tag: 'div',
 			attributes: {
@@ -122,6 +132,31 @@ export default class ColorInputView extends View {
 				this._dropdownView
 			]
 		} );
+
+		this.on( 
+			'change:value',
+			( ev, n, inputValue ) => this._setInputValue( inputValue ),
+			{ priority: 'high' }
+		);
+	}
+
+	/**
+	 * Sets {@link #_inputView}'s value property to the color value or color label,
+	 * if there is one and the user is not typing.
+	 * 
+	 * @private
+	 * @param {String} inputValue Color value to be set.
+	 */
+	_setInputValue( inputValue ){
+		if( !this._stillTyping ){
+			// Check if the value matches one of our defined colors.
+			const mappedColor = this.options.colorDefinitions.find( def => inputValue === def.color );
+			if ( mappedColor ) {
+				this._inputView.value = mappedColor.label;
+			} else {
+				this._inputView.value = inputValue || '';
+			}
+		}
 	}
 
 	/**
@@ -193,14 +228,25 @@ export default class ColorInputView extends View {
 	 */
 	_createInputTextView() {
 		const locale = this.locale;
-		const inputView = new InputTextView( locale );
+		const inputView = new InputTextView( locale, {
+			blur: this.bindTemplate.to('blur')
+		} );
 
-		inputView.bind( 'value' ).to( this );
+		inputView.value = this.value;
 		inputView.bind( 'isReadOnly' ).to( this );
 		inputView.bind( 'hasError' ).to( this );
 
 		inputView.on( 'input', () => {
-			this.value = inputView.element.value;
+			const inputValue = inputView.element.value;
+			// Check if the value matches one of our defined colors' label.
+			const mappedColor = this.options.colorDefinitions.find( def => inputValue === def.label );
+
+			this._stillTyping = true;
+			this.value = mappedColor && mappedColor.color || inputValue;
+		} );
+		this.on( 'blur', () => {
+			this._stillTyping = false;
+			this._setInputValue( inputView.element.value );
 		} );
 
 		inputView.delegate( 'input' ).to( this );
@@ -247,7 +293,6 @@ export default class ColorInputView extends View {
 			this._dropdownView.isOpen = false;
 			this.fire( 'input' );
 		} );
-
 		colorGrid.bind( 'selectedColor' ).to( this, 'value' );
 
 		return colorGrid;
diff --git a/packages/ckeditor5-ui/src/inputtext/inputtextview.js b/packages/ckeditor5-ui/src/inputtext/inputtextview.js
index 3e9bce32d9c..08bd3181975 100644
--- a/packages/ckeditor5-ui/src/inputtext/inputtextview.js
+++ b/packages/ckeditor5-ui/src/inputtext/inputtextview.js
@@ -18,8 +18,9 @@ import '../../theme/components/inputtext/inputtext.css';
 export default class InputTextView extends View {
 	/**
 	 * @inheritDoc
+	 * @param {Object} listeners Map of additional listeners to be attached on template
 	 */
-	constructor( locale ) {
+	constructor( locale, listeners ) {
 		super( locale );
 
 		/**
@@ -91,7 +92,8 @@ export default class InputTextView extends View {
 				'aria-describedby': bind.to( 'ariaDescribedById' )
 			},
 			on: {
-				input: bind.to( 'input' )
+				input: bind.to( 'input' ),
+				...listeners
 			}
 		} );
 

From 7c58d4d647de5b00f7153846732b5662a8b3771f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomek=20Wytr=C4=99bowicz?= <tomalecpub@gmail.com>
Date: Wed, 6 May 2020 17:04:38 +0200
Subject: [PATCH 05/11] Document ColorGridView's execute event.

Rename item to color when iterating through colors, to avoid confusion with ColorGridView.items.
---
 .../src/colorgrid/colorgridview.js            | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/ckeditor5-ui/src/colorgrid/colorgridview.js b/packages/ckeditor5-ui/src/colorgrid/colorgridview.js
index 5865ec03585..f34e7a4f9fa 100644
--- a/packages/ckeditor5-ui/src/colorgrid/colorgridview.js
+++ b/packages/ckeditor5-ui/src/colorgrid/colorgridview.js
@@ -95,21 +95,21 @@ export default class ColorGridView extends View {
 			colorTile.isOn = colorTile.color === this.selectedColor;
 		} );
 
-		colorDefinitions.forEach( item => {
+		colorDefinitions.forEach( color => {
 			const colorTile = new ColorTileView();
 
 			colorTile.set( {
-				color: item.color,
-				label: item.label,
+				color: color.color,
+				label: color.label,
 				tooltip: true,
-				hasBorder: item.options.hasBorder
+				hasBorder: color.options.hasBorder
 			} );
 
 			colorTile.on( 'execute', () => {
 				this.fire( 'execute', {
-					value: item.color,
-					hasBorder: item.options.hasBorder,
-					label: item.label
+					value: color.color,
+					hasBorder: color.options.hasBorder,
+					label: color.label
 				} );
 			} );
 
@@ -175,13 +175,26 @@ export default class ColorGridView extends View {
 		// Start listening for the keystrokes coming from #element.
 		this.keystrokes.listenTo( this.element );
 	}
+
+	/**
+	 * Fired when the `ColorTileView` for the picked item is executed.
+	 *
+	 * @event execute
+	 * @param {Object} data Additional information about the event.
+	 * @param {String} data.value The value of the selected color 
+	 * ({@link module:ui/colorgrid/colorgrid~ColorDefinition#member-color `color.color`}).
+	 * @param {Boolean} data.hasBorder The `hasBorder` property of the selected color 
+	 * ({@link module:ui/colorgrid/colorgrid~ColorDefinition#member-options.hasBorder `color.options.hasBorder`}).
+	 * @param {String} data.Label The label of the selected color 
+	 * ({@link module:ui/colorgrid/colorgrid~ColorDefinition#member-label `color.label`})
+	 */
 }
 
 /**
  * A color definition used to create a {@link module:ui/colorgrid/colortile~ColorTileView}.
  *
  *		{
- *			color: hsl(0, 0%, 75%),
+ *			color: 'hsl(0, 0%, 75%)',
  *			label: 'Light Grey',
  *			options: {
  *				hasBorder: true

From 38a39bbd18e4664fe776995772649490fd29ac16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomek=20Wytr=C4=99bowicz?= <tomalecpub@gmail.com>
Date: Mon, 11 May 2020 10:56:36 +0200
Subject: [PATCH 06/11] Use existing `extendTemplate` instead of expanding
 InputTextView API.

This reverts commit changes to inputtextview.js from 543adbc9092e42163c27fef1412837d7bc6419e0.
---
 .../ckeditor5-table/src/ui/colorinputview.js    | 17 ++++++++++-------
 .../ckeditor5-ui/src/inputtext/inputtextview.js |  6 ++----
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/ckeditor5-table/src/ui/colorinputview.js b/packages/ckeditor5-table/src/ui/colorinputview.js
index 76797d1f8e8..8c22bd87646 100644
--- a/packages/ckeditor5-table/src/ui/colorinputview.js
+++ b/packages/ckeditor5-table/src/ui/colorinputview.js
@@ -109,7 +109,7 @@ export default class ColorInputView extends View {
 		 * The flag that indicates whether the user is still typing.
 		 * If set to true, it means that the text input field ({@link #_inputView}) still has the focus.
 		 * So, we should interrupt the user by replacing the input's value.
-		 * 
+		 *
 		 * @protected
 		 * @member {Boolean}
 		 */
@@ -133,7 +133,7 @@ export default class ColorInputView extends View {
 			]
 		} );
 
-		this.on( 
+		this.on(
 			'change:value',
 			( ev, n, inputValue ) => this._setInputValue( inputValue ),
 			{ priority: 'high' }
@@ -143,12 +143,12 @@ export default class ColorInputView extends View {
 	/**
 	 * Sets {@link #_inputView}'s value property to the color value or color label,
 	 * if there is one and the user is not typing.
-	 * 
+	 *
 	 * @private
 	 * @param {String} inputValue Color value to be set.
 	 */
-	_setInputValue( inputValue ){
-		if( !this._stillTyping ){
+	_setInputValue( inputValue ) {
+		if ( !this._stillTyping ) {
 			// Check if the value matches one of our defined colors.
 			const mappedColor = this.options.colorDefinitions.find( def => inputValue === def.color );
 			if ( mappedColor ) {
@@ -228,8 +228,11 @@ export default class ColorInputView extends View {
 	 */
 	_createInputTextView() {
 		const locale = this.locale;
-		const inputView = new InputTextView( locale, {
-			blur: this.bindTemplate.to('blur')
+		const inputView = new InputTextView( locale );
+		inputView.extendTemplate( {
+			on: {
+				blur: this.bindTemplate.to( 'blur' )
+			}
 		} );
 
 		inputView.value = this.value;
diff --git a/packages/ckeditor5-ui/src/inputtext/inputtextview.js b/packages/ckeditor5-ui/src/inputtext/inputtextview.js
index 08bd3181975..3e9bce32d9c 100644
--- a/packages/ckeditor5-ui/src/inputtext/inputtextview.js
+++ b/packages/ckeditor5-ui/src/inputtext/inputtextview.js
@@ -18,9 +18,8 @@ import '../../theme/components/inputtext/inputtext.css';
 export default class InputTextView extends View {
 	/**
 	 * @inheritDoc
-	 * @param {Object} listeners Map of additional listeners to be attached on template
 	 */
-	constructor( locale, listeners ) {
+	constructor( locale ) {
 		super( locale );
 
 		/**
@@ -92,8 +91,7 @@ export default class InputTextView extends View {
 				'aria-describedby': bind.to( 'ariaDescribedById' )
 			},
 			on: {
-				input: bind.to( 'input' ),
-				...listeners
+				input: bind.to( 'input' )
 			}
 		} );
 

From dd70cb844d0b2e72650b8403ef5d1ede273b4d1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomek=20Wytr=C4=99bowicz?= <tomalecpub@gmail.com>
Date: Mon, 11 May 2020 12:44:35 +0200
Subject: [PATCH 07/11] Fix JSDoc links in ColorGridView@execute params.

---
 packages/ckeditor5-ui/src/colorgrid/colorgridview.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/ckeditor5-ui/src/colorgrid/colorgridview.js b/packages/ckeditor5-ui/src/colorgrid/colorgridview.js
index f34e7a4f9fa..7bf1ae2b0ef 100644
--- a/packages/ckeditor5-ui/src/colorgrid/colorgridview.js
+++ b/packages/ckeditor5-ui/src/colorgrid/colorgridview.js
@@ -181,12 +181,12 @@ export default class ColorGridView extends View {
 	 *
 	 * @event execute
 	 * @param {Object} data Additional information about the event.
-	 * @param {String} data.value The value of the selected color 
-	 * ({@link module:ui/colorgrid/colorgrid~ColorDefinition#member-color `color.color`}).
-	 * @param {Boolean} data.hasBorder The `hasBorder` property of the selected color 
-	 * ({@link module:ui/colorgrid/colorgrid~ColorDefinition#member-options.hasBorder `color.options.hasBorder`}).
-	 * @param {String} data.Label The label of the selected color 
-	 * ({@link module:ui/colorgrid/colorgrid~ColorDefinition#member-label `color.label`})
+	 * @param {String} data.value The value of the selected color
+	 * ({@link module:ui/colorgrid/colorgrid~ColorDefinition#color `color.color`}).
+	 * @param {Boolean} data.hasBorder The `hasBorder` property of the selected color
+	 * ({@link module:ui/colorgrid/colorgrid~ColorDefinition#options.hasBorder `color.options.hasBorder`}).
+	 * @param {String} data.Label The label of the selected color
+	 * ({@link module:ui/colorgrid/colorgrid~ColorDefinition#label `color.label`})
 	 */
 }
 

From c0d7683e5cfc5e75bf57397c6a4dd8fee07cc197 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= <pkoszulinski@gmail.com>
Date: Mon, 11 May 2020 13:55:16 +0200
Subject: [PATCH 08/11] Minor refactoring (comments, order).

---
 .../ckeditor5-table/src/ui/colorinputview.js  | 46 +++++++++++--------
 1 file changed, 26 insertions(+), 20 deletions(-)

diff --git a/packages/ckeditor5-table/src/ui/colorinputview.js b/packages/ckeditor5-table/src/ui/colorinputview.js
index 8c22bd87646..d6aa908c9d9 100644
--- a/packages/ckeditor5-table/src/ui/colorinputview.js
+++ b/packages/ckeditor5-table/src/ui/colorinputview.js
@@ -135,30 +135,11 @@ export default class ColorInputView extends View {
 
 		this.on(
 			'change:value',
-			( ev, n, inputValue ) => this._setInputValue( inputValue ),
+			( evt, name, inputValue ) => this._setInputValue( inputValue ),
 			{ priority: 'high' }
 		);
 	}
 
-	/**
-	 * Sets {@link #_inputView}'s value property to the color value or color label,
-	 * if there is one and the user is not typing.
-	 *
-	 * @private
-	 * @param {String} inputValue Color value to be set.
-	 */
-	_setInputValue( inputValue ) {
-		if ( !this._stillTyping ) {
-			// Check if the value matches one of our defined colors.
-			const mappedColor = this.options.colorDefinitions.find( def => inputValue === def.color );
-			if ( mappedColor ) {
-				this._inputView.value = mappedColor.label;
-			} else {
-				this._inputView.value = inputValue || '';
-			}
-		}
-	}
-
 	/**
 	 * Focuses the input.
 	 */
@@ -300,4 +281,29 @@ export default class ColorInputView extends View {
 
 		return colorGrid;
 	}
+
+	/**
+	 * Sets {@link #_inputView}'s value property to the color value or color label,
+	 * if there is one and the user is not typing.
+	 *
+	 * Handles cases like:
+	 *
+	 * * Someone picks the color in the grid.
+	 * * The color is set from the plugin level.
+	 *
+	 * @private
+	 * @param {String} inputValue Color value to be set.
+	 */
+	_setInputValue( inputValue ) {
+		if ( !this._stillTyping ) {
+			// Check if the value matches one of our defined colors.
+			const mappedColor = this.options.colorDefinitions.find( def => inputValue === def.color );
+
+			if ( mappedColor ) {
+				this._inputView.value = mappedColor.label;
+			} else {
+				this._inputView.value = inputValue || '';
+			}
+		}
+	}
 }

From 2e151967b7b52acc1215f71aaacf556380fa6ae0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= <pkoszulinski@gmail.com>
Date: Mon, 11 May 2020 13:59:54 +0200
Subject: [PATCH 09/11] Removed a priority that seems to be excessive.

---
 packages/ckeditor5-table/src/ui/colorinputview.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/ckeditor5-table/src/ui/colorinputview.js b/packages/ckeditor5-table/src/ui/colorinputview.js
index d6aa908c9d9..f9146e35996 100644
--- a/packages/ckeditor5-table/src/ui/colorinputview.js
+++ b/packages/ckeditor5-table/src/ui/colorinputview.js
@@ -133,11 +133,7 @@ export default class ColorInputView extends View {
 			]
 		} );
 
-		this.on(
-			'change:value',
-			( evt, name, inputValue ) => this._setInputValue( inputValue ),
-			{ priority: 'high' }
-		);
+		this.on( 'change:value', ( evt, name, inputValue ) => this._setInputValue( inputValue ) );
 	}
 
 	/**

From 4393cfb74ac7402fb2e36e65481a456b1d512d92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= <pkoszulinski@gmail.com>
Date: Mon, 11 May 2020 14:17:57 +0200
Subject: [PATCH 10/11] Formatting.

---
 .../tests/ui/colorinputview.js                | 97 +++++++++++--------
 1 file changed, 55 insertions(+), 42 deletions(-)

diff --git a/packages/ckeditor5-table/tests/ui/colorinputview.js b/packages/ckeditor5-table/tests/ui/colorinputview.js
index 44ad7d649ec..efe7f1db0d7 100644
--- a/packages/ckeditor5-table/tests/ui/colorinputview.js
+++ b/packages/ckeditor5-table/tests/ui/colorinputview.js
@@ -3,6 +3,8 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
+/* global Event */
+
 import ColorInputView from '../../src/ui/colorinputview';
 import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
 import ColorGridView from '@ckeditor/ckeditor5-ui/src/colorgrid/colorgridview';
@@ -138,7 +140,7 @@ describe( 'ColorInputView', () => {
 				expect( colorGridView ).to.be.instanceOf( ColorGridView );
 			} );
 
-			it( 'should set #value upon #execute', () => {
+			it( 'should set ColorInputView#value upon ColorTileView#execute', () => {
 				expect( view.value ).to.equal( '' );
 
 				colorGridView.items.last.fire( 'execute' );
@@ -146,7 +148,7 @@ describe( 'ColorInputView', () => {
 				expect( view.value ).to.equal( 'rgb(0,0,255)' );
 			} );
 
-			it( 'should set input text #value to the selected color\'s label upon #execute', () => {
+			it( 'should set InputTextView#value to the selected color\'s label upon ColorTileView#execute', () => {
 				expect( inputView.value ).to.equal( '' );
 
 				colorGridView.items.last.fire( 'execute' );
@@ -154,7 +156,7 @@ describe( 'ColorInputView', () => {
 				expect( inputView.value ).to.equal( 'Blue' );
 			} );
 
-			it( 'should close the dropdown upon #execute', () => {
+			it( 'should close the dropdown upon ColorTileView#execute', () => {
 				view._dropdownView.isOpen = true;
 
 				colorGridView.items.last.fire( 'execute' );
@@ -162,7 +164,7 @@ describe( 'ColorInputView', () => {
 				expect( view._dropdownView.isOpen ).to.be.false;
 			} );
 
-			it( 'should fire #input upon #execute', () => {
+			it( 'should fire the ColorInputView#input event upon ColorTileView#execute', () => {
 				const spy = sinon.spy( view, 'fire' );
 
 				colorGridView.items.last.fire( 'execute' );
@@ -216,7 +218,7 @@ describe( 'ColorInputView', () => {
 				expect( inputView.value ).to.equal( 'bar' );
 			} );
 
-			it( `when the color input value is set to one of defined colors, 
+			it( `when the color input value is set to one of defined colors,
 			should use its label as the text input value`, () => {
 				view.value = 'rgb(0,255,0)';
 				expect( inputView.value ).to.equal( 'Green' );
@@ -253,59 +255,70 @@ describe( 'ColorInputView', () => {
 				expect( view.value ).to.equal( 'bar' );
 			} );
 
-			it( `when any defined color label is given as the text input #value (case-sensitive),
-			should set the color as #value on #input event`, () => {
-				inputView.element.value = 'Red';
-				inputView.fire( 'input' );
+			it(
+				`when any defined color label is given as the text input #value (case-sensitive),
+				should set the color as #value on #input event`,
+				() => {
+					inputView.element.value = 'Red';
+					inputView.fire( 'input' );
 
-				expect( view.value ).to.equal( 'rgb(255,0,0)' );
+					expect( view.value ).to.equal( 'rgb(255,0,0)' );
 
-				inputView.element.value = 'Green';
-				inputView.fire( 'input' );
+					inputView.element.value = 'Green';
+					inputView.fire( 'input' );
 
-				expect( view.value ).to.equal( 'rgb(0,255,0)' );
+					expect( view.value ).to.equal( 'rgb(0,255,0)' );
 
-				inputView.element.value = 'blue';
-				inputView.fire( 'input' );
+					inputView.element.value = 'blue';
+					inputView.fire( 'input' );
 
-				expect( view.value ).to.equal( 'blue' );
-			} );
+					expect( view.value ).to.equal( 'blue' );
+				}
+			);
 
-			it( `when any defined color label is given as the text input #value (case-sensitive),
-			then a non-defined value is set to the color input, 
-			the latter value should be set to text input`, () => {
-				inputView.element.value = 'Red';
-				inputView.fire( 'input' );
+			it(
+				`when any defined color label is given as the text input #value (case-sensitive),
+				then a non-defined value is set to the color input,
+				the latter value should be set to text input`,
+				() => {
+					inputView.element.value = 'Red';
+					inputView.fire( 'input' );
 
-				expect( view.value ).to.equal( 'rgb(255,0,0)' );
+					expect( view.value ).to.equal( 'rgb(255,0,0)' );
 
-				
-				view.value = 'rgb(0,0,255)';
+					view.value = 'rgb(0,0,255)';
 
-				expect( view.value ).to.equal( 'rgb(0,0,255)' );
-			} );
+					expect( view.value ).to.equal( 'rgb(0,0,255)' );
+				}
+			);
 
-			it( `when any defined color value is given as the text input #value (case-sensitive),
-			its value should be set to color and text inputs after input event`, () => {
-				inputView.element.value = 'rgb(255,0,0)';
-				inputView.fire( 'input' );
+			it(
+				`when any defined color value is given as the text input #value (case-sensitive),
+				its value should be set to color and text inputs after input event`,
+				() => {
+					inputView.element.value = 'rgb(255,0,0)';
+					inputView.fire( 'input' );
 
-				expect( view.value ).to.equal( 'rgb(255,0,0)' );
-				expect( inputView.element.value ).to.equal( 'rgb(255,0,0)' );
-			} );
+					expect( view.value ).to.equal( 'rgb(255,0,0)' );
+					expect( inputView.element.value ).to.equal( 'rgb(255,0,0)' );
+				}
+			);
 
-			it( `when any defined color value is given as the text input #value (case-sensitive),
-			its label should be set to text inputs after blur event on input view input element`, () => {
-				inputView.element.value = 'rgb(255,0,0)';
+			it(
+				`when any defined color value is given as the text input #value (case-sensitive),
+				its label should be set to text inputs after blur event on input view input element`,
+				() => {
+					inputView.element.value = 'rgb(255,0,0)';
 
-				inputView.fire( 'input' );
+					inputView.fire( 'input' );
 
-				expect( inputView.element.value ).to.equal( 'rgb(255,0,0)' );
+					expect( inputView.element.value ).to.equal( 'rgb(255,0,0)' );
 
-				inputView.element.dispatchEvent( new Event( 'blur' ) );
+					inputView.element.dispatchEvent( new Event( 'blur' ) );
 
-				expect( inputView.element.value ).to.equal( 'Red' );
-			} );
+					expect( inputView.element.value ).to.equal( 'Red' );
+				}
+			);
 
 			it( 'should have #input event delegated to the color input', () => {
 				const spy = sinon.spy();

From 9abb6197416372c1851422a0ed25180a0c956ce4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= <pkoszulinski@gmail.com>
Date: Mon, 11 May 2020 14:31:41 +0200
Subject: [PATCH 11/11] Move the blur event to the internal input.

---
 packages/ckeditor5-table/src/ui/colorinputview.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/ckeditor5-table/src/ui/colorinputview.js b/packages/ckeditor5-table/src/ui/colorinputview.js
index f9146e35996..4ec3b3a55e5 100644
--- a/packages/ckeditor5-table/src/ui/colorinputview.js
+++ b/packages/ckeditor5-table/src/ui/colorinputview.js
@@ -206,9 +206,10 @@ export default class ColorInputView extends View {
 	_createInputTextView() {
 		const locale = this.locale;
 		const inputView = new InputTextView( locale );
+
 		inputView.extendTemplate( {
 			on: {
-				blur: this.bindTemplate.to( 'blur' )
+				blur: inputView.bindTemplate.to( 'blur' )
 			}
 		} );
 
@@ -224,7 +225,8 @@ export default class ColorInputView extends View {
 			this._stillTyping = true;
 			this.value = mappedColor && mappedColor.color || inputValue;
 		} );
-		this.on( 'blur', () => {
+
+		inputView.on( 'blur', () => {
 			this._stillTyping = false;
 			this._setInputValue( inputView.element.value );
 		} );