The following sequence results in a form that the user can never submit.
Steps to reproduce:
1. Configure a content type with a *required* "Long Text" field, and a file upload (or, for example, an integer field with unlimited cardinality).
3. Trigger an ajax rebuild (for example, upload a file with ajax auto-submit, or press the "add another value" button of the integer field)
4. Enter a value for the Long Text field WYSIWYG, and complete any other fields so the form should be submittable.
5. Click submit.
Result: nothing happens, the form isn't even submitted to the server.
Chrome console shows an error : "An invalid form control with name='field_text[0][value]" is not focusable.
Meaning : the HTML5 client-side validation tries to show a "Please fill in that element" error on the textarea input "below" the CKEditor input because it considers it's empty, and fails because that textarea is hidden. So submission is just stopped, with no message shown.
The HTML for that textarea on the initial page load :
<textarea class="js-text-full text-full form-textarea required resize-vertical" data-drupal-selector="edit-field-text-0-value" id="edit-field-text-0-value" name="field_text[0][value]" rows="5" cols="60" placeholder="" aria-required="true" data-editor-active-text-format="basic_html" data-editor-required="true" style="visibility: hidden; display: none;"></textarea>
After the ajax rebuild :
<textarea class="js-text-full text-full form-textarea required resize-vertical" data-drupal-selector="edit-field-text-0-value" id="edit-field-text-0-value" name="field_text[0][value]" rows="5" cols="60" placeholder="" aria-required="true" data-editor-active-text-format="basic_html" style="visibility: hidden; display: none;" required="required"></textarea>
That is : data-editor-required="true"
turned into required="required"
which then triggers client-side validation (which fails to show the message because the element is hidden)
Comment | File | Size | Author |
---|---|---|---|
#15 | core-js-editor-required-remove-2571755-15.patch | 1.37 KB | nod_ |
Comments
Comment #2
mbayntonComment #3
drubbHaving tested it, I can confirm this bug. It happens whenever the file is uploaded before entering a value for the text field.
Comment #4
drubbI've done some further examinations, seems the issue is triggered by the file upload widget. To reproduce, just use the default article content type, make the body field required, add a node and as first action upload a file (image). The widget will throw an ajax 'parsererror'. This won't happen if you type something in the body field at first.
The rest might be a subsequent error. Maybe as js expert should have a look on it, I don't know much about the underlying js architecture.
Comment #5
drubbsorry, duplicate comment due to DrupalCon d.o. overload :-)
Comment #6
swentel CreditAttribution: swentel commentedI actually think this will be automatically be fixed when #2569897: Required Long Text With Summary + form rebuild = PHP fatal error is done.
Comment #7
swentel CreditAttribution: swentel commentedSo indeed, even with #2569897: Required Long Text With Summary + form rebuild = PHP fatal error applied, there is still a problem, the console error is
"An invalid form control with name='body[0][value]' is not focusable."
Digging.
Comment #8
mbayntonThe console message is just telling you it can't focus a textarea hidden with css.
I bet CKeditor serializes to this textarea on submit, but that event doesn't reach CKEditor due to the html5 validation preventing form submission. Thus, the hidden textarea should never have the required attribute.
Comment #9
yched CreditAttribution: yched commentedI can indeed still reproduce that with #2569897: Required Long Text With Summary + form rebuild = PHP fatal error applied,
And just like that other issue, it's not specific to file uploads, any other ajax button (like the "add another value" button for a multi-valued field) has the same effect.
Investigating
Comment #10
yched CreditAttribution: yched commentedComment #11
nod_I do see the HTML5 issue but it's because the alt text for image is required.My bad, can reproduce
Comment #12
yched CreditAttribution: yched commentedAlso, just to get it out of the way, this is not about "Long Text With Summary" field type specifically (unlike the other issue that was caused by wrong code in the "text with summary" widget). This happens on any required field leveraging CKEditor.
I updated the issue summary with more general "steps to reproduce".
Also, added a more detailed description of the changes before/after the ajax call :
Before (initial page load)
After the ajax rebuild :
That is :
data-editor-required="true"
turned intorequired="required"
which then triggers client-side validation (which fails because the element is hidden)
Comment #13
yched CreditAttribution: yched commentedComment #14
yched CreditAttribution: yched commentedThat seems to be something around core/modules/editor/js/editor.js, and its Drupal.editorAttach behavior :
It runs on initial page load, but something seems to "undo" it after the ajax rebuild.
Comment #15
nod_This was a workaround because ckeditor didn't handle it properly back then.
They fixed it in 4.5.3 so it's not needed anymore.
Comment #16
yched CreditAttribution: yched commentedMakes sense :-)
RTBC (JS-only, not testable...)
Comment #17
Wim LeersWow, amazing find! So this is a funny interaction between behavior attaching/detaching and AJAXy forms. Which went unnoticed for months. Amazing.
Comment #18
alexpottCommitted c72dc29 and pushed to 8.0.x. Thanks!