Fixes 'Remove highlight'

packages/ckeditor5-highlight/src/highlightui.js

@@ -227,10 +227,13 @@ export default class HighlightUI extends Plugin {
 			dropdownView.toolbarView.ariaLabel = t( 'Text highlight toolbar' );
 
 			// Execute current action from dropdown's split button action button.
-			// Also focus the editable after executing the command.
+			splitButtonView.on( 'execute', () => {
+				editor.execute( 'highlight', { value: splitButtonView.commandValue } );
+			} );
+
+			// Focus the editable after executing the command.
 			// It overrides a default behaviour where the focus is moved to the dropdown button (#12125).
 			this.listenTo( dropdownView, 'execute', () => {
-				editor.execute( 'highlight', { value: splitButtonView.commandValue } );
 				editor.editing.view.focus();
 			} );
 

packages/ckeditor5-highlight/tests/highlightui.js

@@ -189,6 +189,15 @@ describe( 'HighlightUI', () => {
 				validateButton( 5 );
 			} );
 
+			it( 'should execute the command only once', () => {
+				const executeSpy = sinon.spy( command, 'execute' );
+
+				buttons[ 5 ].fire( 'execute' );
+
+				sinon.assert.calledOnce( executeSpy );
+				sinon.assert.calledWith( executeSpy, { value: 'greenPen' } );
+			} );
+
 			it( 'should focus view after command execution', () => {
 				const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' );
 
@@ -271,6 +280,15 @@ describe( 'HighlightUI', () => {
 			expect( removeHighlightButton ).to.have.property( 'icon', eraserIcon );
 		} );
 
+		it( 'should execute the command only once', () => {
+			const executeSpy = sinon.spy( command, 'execute' );
+
+			removeHighlightButton.fire( 'execute' );
+
+			sinon.assert.calledOnce( executeSpy );
+			sinon.assert.calledWith( executeSpy, { value: null } );
+		} );
+
 		describe( 'model to command binding', () => {
 			it( 'isEnabled', () => {
 				command.isEnabled = false;