New ColorPicker submits form

[The-io-dev]

📝 Provide detailed reproduction steps (if any)

1. Have an editor with color picker inside a
2. open the color picker, and validate a color

✔️ Expected result

The validation of the color should only update the color defined within ckeditor perimeter.

❌ Actual result

it also submits the form

❓ Possible solution

🩹🩹🩹 A workaround is available until fix is released: #14361 (comment) 🩹🩹🩹

the button being of type="submit" it is expected behavior from HTML.

the switch to a type="button" should correct it.

📃 Other details

It might have sens to add an eslint rule to enforce type="button" on all , since the default type value is submit, but i don't know the whole project.

---

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

[mlewand]

Thanks for a report! We were clearly doing smoke tests outside of a form element thus we missed this important bug.

I'm adding it to our sprint backlog and we'll release the fix in June release.

---

Fixing the issue is one thing but I'd like us to avoid having such issues in the future.

Thanks for suggesting linter rule for submits, however we have a good portion of abstraction over the buttons.

Precisely speaking, this is the line where the issue is:

ckeditor5/packages/ckeditor5-font/src/ui/colortableview.ts

Line 1005 in 72e979b

type: 'submit'

I actually find submit type to be a value here (it adds proper semantics). So what we need here is to properly prevent default's button[type=submit] action.

[mlewand]

One way to prevent this is to wrap our manual tests in a form - this could be done in the default template. The action should lead to a page that would show "congratulations you've just sent a form!" which would be a clear indicator whether that was or wasn't a desired behavior.

[mlewand]

Until we release a proper fix, you can add the following code in your app:

window.setInterval( () => {
	Array.from( document.querySelectorAll( '.ck.ck-color-table .ck-color-picker-page-view [type="submit"]') ).forEach( button => {
		if ( button.dataset.ckeSubmitWorkaround ) {
			return;
		}
	
		button.addEventListener( 'click', event => event.preventDefault() );

		button.dataset.ckeSubmitWorkaround = true;
	} )
}, 300 );

Since it's polling the structure it's not super effective, however there's a simple safeguard to make sure this code is taxing as little as possible.

[illia-stv]

Taken over by #14275 .

[Dumluregn]

There are more buttons that may have the same side effect - e.g. "Save" buttons in table properties and table cell properties. Let's make sure they work as expected too.

[AliaksandrBortnik]

We faced the same issue related to our form submissions due to the submit button of color picker.