TinyMCE with HTML5 Required attribute set won't allow save - no on-page error message

BrendonKoz commented 7 months ago

Short description of the issue

When applying both "required" attributes to a TinyMCE field (Required?, and Also use HTML5 "required" attribute?), any pages created (only tested on new page) using a template with this configuration on that field will fail to save. Removing the HTML5 required attribute and relying on ProcessWire's processing of the form to verify the required field has been filled in appropriately.

Expected behavior

The expected behavior is that PW will identify that the richtext editor field has proper content/value and the page can be saved.

Actual behavior

The page will not save. The browser developer Console fills the page with is not focusable error messages. The page auto-scrolls to the first (if there are multiple) TinyMCE field on the template, but there are no visible error messages on the page. (Using Firefox v124.0b6), should it matter.)

Optional: Screenshots/Links that demonstrate the issue

Optional: Suggestion for a possible fix

A temporary fix is to disable the Also use HTML5 "required" attribute? setting for any/all TinyMCE fields, if set.

Steps to reproduce the issue

Setup a brand new ProcessWire installation (I used the Master branch).
Create a TinyMCE field 3 In the "Input" tab of the TinyMCE field, check/enable the Required? attribute, and once set, also set the Also check/enable the HTML5 "required" attribute? field of the TinyMCE field's settings
Add this configured TinyMCE field to a template
Create a new page using the template this field was added to
Fill out the required content on the newly required page and attempt to save or publish

Setup/Environment

Software	Version
ProcessWire	3.0.229
PHP	8.2.1
Webserver	Apache/2.4.54 (Unix) OpenSSL/3.0.7
MySQL Server	8.0.32
MySQL Client	mysqlnd 8.2.1

matjazpotocnik commented 7 months ago

TinyMCE adds style="display:none" to the <textarea class="FieldtypeTextarea ..." id="Inputfield_body" name="body" rows="5" required="required" style="display:none" aria-hidden="true"></textarea> making it not focusable, not clickable. So I added:

.InputfieldTinyMCE textarea:required {
    display: block !important;
    position: absolute;
    width: 1px;
    overflow: hidden;
}

ryancramerdesign commented 6 months ago

@BrendonKoz Thanks, I didn't realize the HTML5 option was there. It's not supposed to be there because of course TinyMCE is not an HTML5 input type. I have pushed an update that removes that configuration setting.

@matjazpotocnik I'm not sure I understand what that does? Does the focus event transfer to the TinyMCE input somehow?

matjazpotocnik commented 6 months ago

With the first rule, the textarea is made visible again in DOM, and other rules make the textarea 1 px wide, just enough to be focusable:

ryancramerdesign commented 6 months ago

@matjazpotocnik Thanks, that's a creative solution, I like it! :)

Though I'm not confident that it would survive across browsers and also wonder if the user starts typing, would it then go directly into the 1px wide textarea, bypassing TinyMCE. So I'm thinking we should probably just stick with disabling the HTML5 required option for TinyMCE, to play it safe.

matjazpotocnik commented 6 months ago

@ryancramerdesign I still get errors about an unfocusable element. I had to delete "requiredAttr":1 from the data json in the database.

processwire / processwire-issues