Skip to content

CKEditor popover inputs (hyperlinks and media) not focusable when editor is expanded (fullscreen mode) #230

@hanihaghshenas

Description

@hanihaghshenas

Captchas

  • I have read the instructions.
  • I have searched existing issues and avoided creating duplicates.
  • I am not filing a question or an enhancement request.

What happened?

When the CKEditor is in expanded/fullscreen mode, input fields within popover dialogs (such as hyperlink dialog and media dialog) cannot receive focus. Clicking on these input fields causes the focus to go to the toolbar button instead of the input field itself.
This picture shows the state which I clicked on the inputs of the popover and could not type in them:
Image
And this picture shows the exact input when the editor is not expanded and everything works fine:
Image

To reproduce

  1. Create a content type with a CKEditor field
  2. Open the content editor
  3. Click the expand button to enter fullscreen mode
  4. Click the hyperlink button (chain icon) in the toolbar
  5. Try to click on the input fields in the hyperlink popover
  6. Observe that the cursor does not appear in the input fields and focus goes to the toolbar button instead

Setup information

  1. plugin.js exist, but nothing related to this package is included there after installation.
  2. Package.json:
    { "name": "my project name", "version": "0.1.0", "private": true, "description": "A Strapi application", "scripts": { "build": "strapi build", "console": "strapi console", "deploy": "strapi deploy", "dev": "strapi develop", "develop": "strapi develop", "seed:example": "node ./scripts/seed.js", "start": "strapi start", "strapi": "strapi", "upgrade": "npx @strapi/upgrade latest", "upgrade:dry": "npx @strapi/upgrade latest --dry" }, "dependencies": { "@_sh/strapi-plugin-ckeditor": "^6.0.3", "@strapi/plugin-cloud": "5.19.0", "@strapi/plugin-users-permissions": "5.19.0", "@strapi/provider-upload-aws-s3": "^5.20.0", "@strapi/strapi": "5.19.0", "better-sqlite3": "11.3.0", "fs-extra": "^10.0.0", "mime-types": "^2.1.27", "pg": "^8.16.3", "react": "^18.0.0", "react-dom": "^18.0.0", "react-router-dom": "^6.0.0", "sqlite3": "^5.1.7", "styled-components": "^6.0.0" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "typescript": "^5" }, "engines": { "node": ">=18.0.0 <=22.x.x", "npm": ">=6.0.0" }, "strapi": { "uuid": "someString", "installId": "someString" } }
  3. Node version: My project is dockerized with node:22-alpine as its base image.

Additional context

This is how the editor is used in my schema.json:
"my_editor": { "type": "customField", "customField": "plugin::ckeditor5.CKEditor", "options": { "preset": "defaultHtml" } }

Metadata

Metadata

Assignees

Labels

issue: bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions