Gutenberg 7.7.1/7.8: Simple Payments Block is removed if pasting into the email field

[GeoJunkie]

Describe the bug
A clear and concise description of what the bug is.

To reproduce
Steps to reproduce the behavior:

1. Edit a page
2. Add a Simple Payments Block
3. Paste any text into the Email field
4. See that the field is removed

Expected behavior
The text should be pasted into the field

Screenshots

Desktop (please complete the following information):

• OS: MacOS V10.15.4 (19E266)
• Browser Firefox
• Version 74.0 (64-bit)

Additional context

• Started with Gutenberg 7.7.1. Also tested on the 7.8 edge version.
• This issue does not happen on previous versions
• Discovered in WPCOM Calypso, also tested on JN with 7.7.1 and 7.8 Gutenberg versions

[glendaviesnz]

The problem is caused by the fact that Gutenberg is using the input field DOM element selectStart attribute to determine if it is a text input. Inputs of type email return null for selectStart , so the method at https://github.com/WordPress/gutenberg/blob/master/packages/dom/src/dom.js#L454 returns false, and then the copy handler does not return at https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/copy-handler/index.js#L46, and the gutenberg paste handler takes over and kills the email field.

[jeherve]

Related: #11906

[simison]

Should we temporarily make the field type=text at least on wpcom, if not in Jetpack?

[glendaviesnz]

Should we temporarily make the field type=text at least on wpcom, if not in Jetpack?

The only other way I could see to fix in wpcom/jetpack ahead of a fix in gutenberg was to trap the copy/cut/paste events on the email field and stop propogation - PR doing this here - but this is much more heavy handed than just changing the email field to text for now.

[glendaviesnz]

@simison & @jeherve - what are your thoughts on trapping the events versus changing field type to text as a temporary fix on wpcom/jetpack.

Trapping the events was an interesting exercise and may be useful to inform a solution in gutenberg that allows passing an extra prop to TextControl to indicate if native copy/paste should be preserved ... but it is probably overkill as a temporary fix. The field type change fixes the issue and email validation still works.

[simison]

Type text sounds better because of simplicity. Type email doesn't sound that critical anyway?

…

On Fri, 27 Mar 2020, 05:32 Glen Davies, ***@***.***> wrote: @simison <https://github.com/simison> & @jeherve <https://github.com/jeherve> - what are your thoughts on trapping the events <#15143> versus changing field type to text <#15145> as a temporary fix on wpcom/jetpack. Trapping the events was an interesting exercise and may be useful to inform a solution in gutenberg that allows passing an extra prop to TextControl to indicate if native copy/paste should be preserved ... but it is probably overkill as a temporary fix. The field type change fixes the issue and email validation still works. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#15121 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAVJAG2G6CZRPXPL2U63VLRJQM6HANCNFSM4LTX5MRA> .

[jeherve]

Type text sounds better because of simplicity

Agreed, let's go with this for now.