Block does not open when saving or publishing a blocks page with block validation errors

[emteknetnz]

Replication steps

Create an inline editable content block that has validation on a field e.g.

    public function validate(ValidationResult $result)
    {
        if ($this->owner->MyField == 'x') {
            $result->addFieldError('MyField', 'MyField cannot be x');
        }
    }

Set an invalid value for the field and click page save

Then attempt to inline save the block without first opening the inline edit form

Expected

The element form should submit, and when validation errors come back the form should be open and show validation errors

Actual

The inline form will submit, but the inline form will not display to the user. If you manually open the inline form you'll see a validation message because it did submit.

Notes

This seems to happen due to a weird timing issue with the redux-form remote submit happening at the slightly wrong time, causing a duplicate Element component to be rendered which isn't attached to the DOM.

Prior to refactoring done in this PR - the remote submit happened within the SubmitAction.js and things worked as expected. However moving the remote submit to Element.js, for some bizarre reason causes this issue.

The duplicate Element component seems to get created as part of Element.js::handleFormSchemaSubmitResponse(). The duplicate Element.js can be observed by adding a ref via useRef() to a new <div> element as a child or Element and then console.log() it out. What seems to happen is that setPreviewExpanded(true); is called on the dupilcate Element that's not attached to the DOM, rather than the one that is.

This issue also happens with the publish button - though it wasn't picked up because it's not covered by a behat test. It also does a remote submit in Element.js (props.submitForm()).

As part fixing this issue, uncomment this behat test back in to individual-block-validation.feature, and also add one for inline publishing

Scenario: I can save a closed block after saving a page with a validation error
   When I fill in "x" for "My Field" for block 1
   And I press the "Save" button
   # Page validation error
   Then I should see "MyField cannot be x" in the ".alert.error" element
   When I press the "View actions" button
   And I click on the ".element-editor__actions-save" element
   # Same validation error after page load with inline save
   And I should see "MyField cannot be x" in the ".form__validation-message" element
   Then I fill in "abc" for "My Field" for block 1
   # Ensure react field is filled in before submitting
   And I wait for 1 second
   # Need to save the whole page to stop the alert
   And I press the "Save" button

Acceptance criteria

• When inline saving an invalid block after page saving the invalid block pops open
• The behat test that was commented out is uncommented and passes
• A behat test for publishing is writing the mimics the one for saving