htmldjangoformsckeditor5

Error: The invalid form control is not focusable

I'm encountering an issue with my Django form where I'm getting the following error messages in my browser console:

I'm not sure what's causing this error or how to resolve it. I've checked my HTML form and Django view, but I can't seem to find any obvious issues.

Btw, I'm kind of new to both CKEditor and Django, excuse me for any "dumb" requests - I just couldn't find a fix to this.

Here's a snippet of my HTML form:

create.html:

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create Post</title>
    <link rel="stylesheet" href="{% static 'django_ckeditor_5/dist/styles.css' %}">
</head>
<body>
<div class="container">
    <div class="card">
        <h1>Create Post</h1>
        <form action="" method="POST" enctype="multipart/form-data">
            <!-- Other fields, removed for simplicity reasons. -->
            <div class="input">
                {{ form.content }}
            </div>
            <button type="submit">Create Post</button>
        </form>
    </div>
</div>
<script src="{% static 'django_ckeditor_5/dist/bundle.js' %}"></script>
</body>
</html>

views.py(only the function required for create.html:

def createPost(request):
    if request.user.is_authenticated:
        if request.method == "POST":
            form = forms.CreatePostForm(request.POST, request.FILES)
            if form.is_valid():
                post = form.save(commit=False)
                post.author = request.user
                post.slug = slugify(post.title)
                post.save()
                messages.success(request, 'Post created successfully.')
                return redirect('home')
            else:
                messages.error(request, 'Error creating post. Please check the form.')
        else:
            form = forms.CreatePostForm()
        context = {'form': form}
        return render(request, 'create.html', context)
    else:
        raise PermissionDenied()

models.py:

import os
import uuid

from django.db import models
from django.utils.text import slugify
from django_ckeditor_5.fields import CKEditor5Field
from django.contrib.auth.models import User

def thumbnail_upload_path(instance, filename):
    _,ext = os.path.splitext(filename)
    new_filename = f"{uuid.uuid4()}{ext}"
    return os.path.join("uploads/thumbnails/", new_filename)

class Post(models.Model):
    title = models.CharField(max_length=50, null=False, blank=False)
    desc = models.TextField(max_length=255, null=False, blank=False)
    slug = models.SlugField(unique=True, blank=True)
    thumbnail = models.ImageField(upload_to=thumbnail_upload_path, null=False, blank=False)
    category = models.CharField(max_length=20, null=False, blank=False, default="Technology")
    keywords = models.CharField(max_length=255)
    author = models.ForeignKey(User, on_delete=models.CASCADE)
    content = CKEditor5Field('Text', config_name='extends')

    def save(self, *args, **kwargs):
        if not self.slug or self.title != self.slug:
            self.slug = slugify(self.title)
        super().save(*args, **kwargs)

    def __str__(self):
        return self.title

forms.py:

from django import forms
from django_ckeditor_5.widgets import CKEditor5Widget
from . import models

class CreatePostForm(forms.ModelForm):
    class Meta:
        model = models.Post
        fields = '__all__'
        widgets = {
            'content': CKEditor5Widget(config_name='extends'),
        }

I've checked the HTML form and the Django view to ensure that the CKEditor5 widget is properly included and the form data is handled correctly. Despite my efforts, error messages continue to appear in the browser.

Solution

  • Fixed it:

    The issue was the content field in the Model

    Instead of:

    content = CKEditor5Field('Text', config_name='extends')

    it had to be:

    content = CKEditor5Field('Text', config_name='extends', null=True, blank=True)

    Thanks to everyone that tried to help.