Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SimpleMDE Field Incorrectly Marked as Empty When Using required Attribute #2877

Open
tabuna opened this issue Aug 18, 2024 · 0 comments
Open
Assignees
Labels

Comments

@tabuna
Copy link
Member

tabuna commented Aug 18, 2024

Describe the bug
When creating a markdown text editor using the SimpleMDE::make('editor')->required() method, the required attribute is automatically added to the underlying CodeMirror instance. This causes side effects, such as the field appearing empty if it hasn't been manually edited or when content is added via copy-paste. As a result, the form cannot be submitted, even though the field is technically filled.

To Reproduce
Steps to reproduce the behavior:

  1. Create a markdown editor field using SimpleMDE::make('editor')->required().
  2. Attempt to submit the form without manually editing the editor content.
  3. Observe that the form submission is blocked due to the field being considered empty.
  4. Copy and paste content into the editor and attempt to submit again. The same issue occurs.

Expected behavior
The form should be able to be submitted if the markdown editor field contains content, regardless of whether the content was manually typed or added via copy-paste.

Additional context
This issue seems to stem from the fact that the required attribute is being passed to the CodeMirror instance instead of just validating the presence of content in the underlying text area. One potential solution could be to manage the required validation via a custom validation rule in Laravel, rather than directly attaching it to the CodeMirror field.

// Required attribute https://github.com/sparksuite/simplemde-markdown-editor/issues/324
if (this.textarea.required) {
this.element.querySelector('.CodeMirror textarea').required = true;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Development

No branches or pull requests

1 participant