Table editing popover can appear completely offscreen

[ryanclanigan]

📝 Provide detailed reproduction steps (if any)

1. Use the following React based template:

import { CKEditor } from '@ckeditor/ckeditor5-react';
import {
  ClassicEditor, Essentials, Paragraph, Table,
  TableCellProperties,
  TableColumnResize,
  TableProperties,
  TableToolbar
} from 'ckeditor5';

import 'ckeditor5/ckeditor5.css';

function App() {
  return <div>
    <CKEditor
      editor={ClassicEditor}
      config={{
        licenseKey: '<key>',
        plugins: [Essentials, Paragraph, Table,
          TableCellProperties,
          TableColumnResize,
          TableProperties,
          TableToolbar,],
        toolbar: ['insertTable'],
        table: {
          contentToolbar: [
            'tableRow',
            'tableColumn',
            'mergeTableCells',
            'tableProperties',
            'tableCellProperties',
          ],
        },
        initialData: '<p>Hello from CKEditor 5 in React!</p>',
      }}
    />
  </div>;
}

export default App;

2. Clear the contents of the editor
3. Insert a table of at least two rows
4. Clicking into any bottom cell
5. Hold enter until the table grows to the point that a scrollbar appears
6. Scroll back up to the top of the editor
7. Click on the table and open the Table Properties modal
8. Observe that the modal is off the top of the viewport

✔️ Expected result

The modal appears in the viewport

❌ Actual result

The modal appears off the top of the viewport, unusable

❓ Possible solution

I dove into the code a bit. It seems that ckeditor5-utils/src/dom/position.js::getOptimalPosition is receiving the entire document body as the limiter. I think it needs to receive the table element as the limiter. I made an equivalent change locally by providing a custom limiter function that finds the currently targeted table and that seems to fix it.

📃 Other details

• Browser: Chrome
• OS: Linux
• First affected CKEditor version: 44.3.0
• Installed CKEditor plugins: Table and table related plugins

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[pszczesniak]

Thank you for your feedback.

Are you able to show where exactly the issue is? Cause we were trying to repeat the steps to reproduce it but we didn't found it.

[CKEditorBot]

The issue lacks the feedback we asked for two weeks. Hence, we've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).