Gutenberg doesn't prevent default html events

[cawa-93]

Description

I tried to build simple block:

<details>
	<summary><RitchText></summary>
</details>

The problem is that it is not possible to type a space character into the RitchText, because pressing the space-key trigger details to toggle, rather than typing a space character.

Step-by-step reproduction instructions

1. Create block with markup:

el('details', [
    el('summary', {}, [
        el(RichText, {
            tagName: 'span',
            placeholder: 'Try to type Space',

        })
    ]),
    'Content in details'
])

2. Add block to content
3. Try to write some text with spaces.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[carolinan]

Hi,
The keyboard events are disabled per block when needed.
Here is an example of how it is added to the pull request for the details block:

gutenberg/packages/block-library/src/details-summary/edit.js

Line 12 in 731a8e8

onClick={ ( event ) => event.preventDefault() }

[cawa-93]

Hi, The keyboard events are disabled per block when needed. Here is an example of how it is added to the pull request for the details block:

gutenberg/packages/block-library/src/details-summary/edit.js

Line 12 in 731a8e8

onClick={ ( event ) => event.preventDefault() }

Sorry, but I don't really understand what you mean.

I tried add onClick={ ( event ) => event.preventDefault() } to summary in my block. In this case, pressing the spacebar does prevent toggling details, but at the same time the space character is not entered into RichText. I also tried prevent onKeyUp and got same effect - details doesn't toggle when I press spacebar, but space chapter doesn't entered. I tried prevent onKeyDown as well. In this case, no text is entering at all

[carolinan]

If you look closer at the linked pull request:
The <summary> is a wrapper for the richtext. The preventDefault is on the summary, not the richtext, this allows typing space in the richtext.
In the editor, the <details> is opened when selected:

gutenberg/packages/block-library/src/details/edit.js

Line 53 in 731a8e8

open={ hasSelection || showContent }

But in general I think it needs to be added per block, that Gutenberg should not prevent these events by default.
There are some more examples. Several links are prevented from being opened inside the editor:
https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/avatar/edit.js#L155

[cawa-93]

The <summary> is a wrapper for the richtext. The preventDefault is on the summary, not the richtext, this allows typing space in the richtext.

Yeah. It's exacly what I did. My edit function looks like this:

function edit({attributes, setAttributes}) {
    return el('details', {...useBlockProps()}, [
        el('summary', {
            onClick: (event) => event.preventDefault()
        }, [
            el(RichText, {
                value: attributes.label,
                onChange: (newSummary) =>
                    setAttributes({label: newSummary}),
                withoutInteractiveFormatting: true,

                placeholder: 'Try to type Space',
            })
        ]),
        'INNER CONTENT HERE'
    ])
}

UPD I just realized that the problem is not reproduced in Edge. Indeed, In Edge, you CAN type space. But, I test it in Firefox (112.0b7), and there, pressing spacebar doesn't type space chapter. Bug tracker

[ellatrix]

This was fixed in #30244 but removed later in #41977. Also, we now have a core details block and the solution there is to use a div inside the summary element. #45055

Ideally, browsers should disable interactivity when an element is content editable (like they do for a link), so I'd recommend reporting it to them.