Warning on pressing ENTER fast

[ellatrix]

Issue Overview

Discovered while testing #5769 in Chrome.

When I press enter several times quickly, I get the following warning:

Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>.
    in p
    in p (created by TinyMCE)
    in TinyMCE (created by Autocomplete)
    in div (created by Autocomplete)
    in Autocomplete (created by _class)
    in div (created by _class)
    in _class (created by _class)
    in _class (created by _class)
    in _class (created by FilteredAutocomplete)
    in div (created by FilteredAutocomplete)
    in FilteredAutocomplete (created by RichText)
    in div (created by RichText)
    in RichText (created by WrappedComponent)
    in WrappedComponent (created by WithSelect(WrappedComponent))
    in WithSelect(WrappedComponent) (created by ParagraphBlock)
    in div (created by ParagraphBlock)
    in ParagraphBlock (created by BlockEdit)
    in BlockEdit (created by WrappedComponent)
    in WrappedComponent (created by WithApiData(WrappedComponent))
    in WithApiData(WrappedComponent) (created by WithSelect(WithApiData(WrappedComponent)))
    in WithSelect(WithApiData(WrappedComponent)) (created by WithToolbarControls(WithSelect(WithApiData(WrappedComponent))))
    in WithToolbarControls(WithSelect(WithApiData(WrappedComponent))) (created by WithInspectorControl(WithToolbarControls(WithSelect(WithApiData(WrappedComponent)))))
    in WithInspectorControl(WithToolbarControls(WithSelect(WithApiData(WrappedComponent)))) (created by WithInspectorControl(WithInspectorControl(WithToolbarControls(WithSelect(WithApiData(WrappedComponent))))))
    in WithInspectorControl(WithInspectorControl(WithToolbarControls(WithSelect(WithApiData(WrappedComponent)))))
    in Unknown (created by WithDispatch(Component))
    in WithDispatch(Component) (created by WithUseOnceValidation(WithInspectorControl(WithInspectorControl(WithToolbarControls(WithSelect(WithApiData(WrappedComponent)))))))
    in WithUseOnceValidation(WithInspectorControl(WithInspectorControl(WithToolbarControls(WithSelect(WithApiData(WrappedComponent)))))) (created by WithFilters(WithSelect(WithApiData(WrappedComponent))))
    in WithFilters(WithSelect(WithApiData(WrappedComponent))) (created by BlockListBlock)
    in BlockCrashBoundary (created by BlockListBlock)
    in div (created by IgnoreNestedEvents)
    in IgnoreNestedEvents (created by BlockListBlock)
    in div (created by IgnoreNestedEvents)
    in IgnoreNestedEvents (created by BlockListBlock)
    in BlockListBlock (created by WithAlign(BlockListBlock))
    in WithAlign(BlockListBlock) (created by WithFilters(BlockListBlock))
    in WithFilters(BlockListBlock) (created by WrappedComponent)
    in WrappedComponent (created by WithDispatch(WrappedComponent))
    in WithDispatch(WrappedComponent) (created by WithSelect(WithDispatch(WrappedComponent)))
    in WithSelect(WithDispatch(WrappedComponent)) (created by BlockListLayout)
    in div (created by BlockListLayout)
    in BlockListLayout (created by Connect(BlockListLayout))
    in Connect(BlockListLayout) (created by WithSelect(Connect(BlockListLayout)))
    in WithSelect(Connect(BlockListLayout)) (created by BlockList)
    in BlockList (created by VisualEditor)
    in div (created by ObserveTyping)
    in ObserveTyping (created by WrappedComponent)
    in WrappedComponent (created by WithDispatch(WrappedComponent))
    in WithDispatch(WrappedComponent) (created by WithSelect(WithDispatch(WrappedComponent)))
    in WithSelect(WithDispatch(WrappedComponent)) (created by VisualEditor)
    in div (created by WritingFlow)
    in div (created by WritingFlow)
    in WritingFlow (created by Connect(WritingFlow))
    in Connect(WritingFlow) (created by VisualEditor)
    in div (created by BlockSelectionClearer)
    in BlockSelectionClearer (created by WithDispatch(BlockSelectionClearer))
    in WithDispatch(BlockSelectionClearer) (created by WithSelect(WithDispatch(BlockSelectionClearer)))
    in WithSelect(WithDispatch(BlockSelectionClearer)) (created by VisualEditor)
    in VisualEditor (created by WithViewportMatch(VisualEditor))
    in WithViewportMatch(VisualEditor) (created by WithSelect(WithViewportMatch(VisualEditor)))
    in WithSelect(WithViewportMatch(VisualEditor)) (created by Layout)
    in div (created by Layout)
    in div (created by Layout)
    in Layout (created by WithViewportMatch(Layout))
    in WithViewportMatch(Layout) (created by _class)
    in div (created by _class)
    in _class (created by WithDispatch(_class))
    in WithDispatch(_class) (created by WithSelect(WithDispatch(_class)))
    in WithSelect(WithDispatch(_class))
    in ErrorBoundary
    in Provider (created by EditorProvider)
    in RichTextProvider (created by EditorProvider)
    in SlotFillProvider (created by EditorProvider)
    in APIProvider (created by EditorProvider)
    in DropZoneProvider (created by EditorProvider)
    in EditorProvider

[ellatrix]

When trying to reproduce, I sometimes don't get the warning right away, but it still appear after holding ENTER for a while, moving the caret to another paragraph, then holding ENTER again.

[ellatrix]

Also in the case of holding ENTER (and maybe fast consecutive presses), some paragraphs created have a lot of line breaks:

[ellatrix]

Here's what happens when the warning occurs (both Chrome and Safari):

[mikehaydon]

I was unable to get the warning while running commit 80185d7 (April 7, 2018).

Comparing to the code you shared, it now seems to create

<div>
<br>
</div>
instead of
<p>
<br>
</p>

But that is only when you hold the enter key. It took holding it for 5+ seconds to really mess up with several br tags inside a text block.

Rapidly pressing the enter key as fast as I could only resulted in more, regular text blocks being created, as expected.

My question is if the user is holding down the Enter key, what output are they expecting? I'm struggling to think of a scenario where they wouldn't just delete that.

[ZebulanStanphill]

Related: #5872