Autogrow plugin causing width of editor's container to be set to 0px

[vbhargavmbis]

Type of report

Bug

Provide detailed reproduction steps (if any)

1. Navigate to CKEditor's autogrow plugin demo site: https://ckeditor.com/docs/ckeditor4/latest/examples/autogrow.html#!/guide/dev_autogrow
2. Remove border widths from the container div (div with id='cke_editor1')
3. Click into the editor
4. Press Enter until the size of the editor grows (at least twice)

Expected result

The length of the editor should increase and the width should not change
Screenshot:

Actual result

The width of the container (div with id='cke_editor1') is set to 0px and becomes unusable
Screenshot:

Debugging details

• This commit in version 4.14.1 has caused this issue to surface: https://github.com/ckeditor/ckeditor4/pull/4010/files?file-filters%5B%5D=.js
• More specifically, this line: https://github.com/ckeditor/ckeditor4/pull/4010/files?file-filters%5B%5D=.js#diff-d0c2cb93caeb33d1d59fd2506921ea4aR290
  • Previously, before width = convertCssUnitToPx( width ); was introduced, width was an empty string "" and so the next line outer.setSize( 'width', width, true ); did not actually set the style because width was not a number.
  • Now that width is a number (0), it calculates the width size and adjusts based on padding.
    • During this calculation, if there is some padding (say 1px all around), then size gets set to 0 - 2 = -2px and setStyle() is called. setStyle() doesn't set a negative width so it's a no-op.
    • If there is no padding, then size gets set to 0px. setStyle() is called and the width of the container is then set to 0px.

Other details

• Browser: Chrome
• OS: MacOS Catalina
• CKEditor version: 4.14.1 and 4.15.0
• Installed CKEditor plugins: autogrow

[f1ames]

Hello @vbhargavmbis, thanks for reporting and such detailed analysis of this issue 👍

[Codewow]

This might not need to be said, but this likely also affects the resizer arrow in bottom right if enabled. I am having this exact issue when attempting to use the resizer arrow to extend the height. I do not have the autoGrow plugin, however.

[f1ames]

This might not need to be said, but this likely also affects the resizer arrow in bottom right if enabled. I am having this exact issue when attempting to use the resizer arrow to extend the height. I do not have the autoGrow plugin, however.

@Codewow could you provide reproduction steps for your issue? I tried to reproduce it (see this codepen) but without success.

[f1ames]

@vbhargavmbis the quick workaround for this issue is to set editor width explicitly via config.width.

[f1ames]

Fixed in #4307.