Opened 9 months ago

Closed 9 days ago

#14714 closed Bug (fixed)

[Webkit/Blink] Exception thrown on refocusing blurred inline editor

Reported by: j.swiderski Owned by: m.lewandowski
Priority: Normal Milestone: CKEditor 4.7.0
Component: General Version: 4.0
Keywords: Blink Cc:

Description (last modified by m.lewandowski)

Steps to reproduce

  1. Open div area sample.
  2. Clear up the editor content.
  3. Put the selection inside the editor.
  4. Select "Marker" style from a styles dropdown and type some text.
  5. Blur the editor (by clicking outside of the editor).
  6. Click on styles button.
  7. Blur the editor (by clicking outside of the editor).
  8. Click on styles button.

Expected result

No JS error is thrown

Actual result

JS error is thrown:

Uncaught DOMException: Failed to execute 'setStart' on 'Range': The offset 13 is larger than or equal to the node's length (6).

Other details (browser, OS, CKEditor version, installed plugins)

Attachments (1)

2016-07-01_1853.swf (836.1 KB) - added by j.swiderski 9 months ago.

Download all attachments as: .zip

Change History (18)

Changed 9 months ago by j.swiderski

comment:1 Changed 9 months ago by j.swiderski

  • Status changed from new to confirmed

Please also see the video showing the issue.

comment:2 Changed 8 months ago by m.lewandowski

It does not necessarily require you to change tabs. Here'se a simplified TC:

  1. Open div area sample.
  2. Clear up the editor content.
  3. Put the selection inside the editor.
  4. Select "Marker" style from a styles dropdown.
  5. Blur the editor (by clicking outside of the editor).
  6. Click on styles button and apply "Big" style.

Edit: Above is no longer reproducible on 4.7.0.

Last edited 11 days ago by m.lewandowski (previous) (diff)

comment:3 follow-up: Changed 8 months ago by Reinmar

The error is thrown when unlocking a selection. The locked one has much higher offsets than the number of typed letters which means that it's a problem with the filling chars. The selection is locked in a DOM with a filling chars, but when it's unlocked, there are no filling chars.

I'm curious how the filling chars behave in other cases. First of all, it's obvious that all this works fine in an iframed editor because there's no selection locking as iframe can keep its own selection. But can we find some cases with inline editables in which unlocking selection works if the selection had filling chars upon lock?

comment:4 in reply to: ↑ 3 Changed 8 months ago by k.krzton

Replying to Reinmar:

The error is thrown when unlocking a selection. The locked one has much higher offsets than the number of typed letters which means that it's a problem with the filling chars. The selection is locked in a DOM with a filling chars, but when it's unlocked, there are no filling chars.

It looks like the filling char sequence is removed on editor refocus. The selectionChange event is fired after refocusing and it starts the process of checking and removing filling chars (https://github.com/ckeditor/ckeditor-dev/blob/master/core/selection.js#L859).

comment:5 Changed 8 months ago by Reinmar

Any idea how it works in e.g. tab, and then shift+tab case that it doesn't throw? How is this case different from other ones?

comment:6 Changed 8 months ago by k.krzton

I'm still looking into where is the difference between refocusing with tab/shift+tab and mouse (via dropdown). It works well with tab/shift+tab and also when focusing toolbar (alt+F10) and applying "Big" style using keyboard.

The one strange case is when focusing toolbar (alt+F10) and then using left/right arrows. It should switch between buttons in a toolbar group but instead, focus is set back in the editable area and the above exception is thrown (it happens only in the case which will throw this error ofc). The left/right arrow triggers removeFillingCharSequenceNode function which causes this error.

Last edited 8 months ago by k.krzton (previous) (diff)

comment:7 Changed 8 months ago by k.krzton

It can also be reproduced following the steps:

  1. Open div area sample.
  2. Clear up the editor content.
  3. Put the selection inside the editor.
  4. Select "Marker" style from a styles dropdown and type some text.
  5. Blur the editor (by clicking outside of the editor).
  6. Click on styles button.
  7. Blur the editor (by clicking outside of the editor).
  8. Click on styles button.

It seems like at the first refocus (step 6), removeFillingCharSequenceNode method (which removes filling chars) runs without any error and ranges cache is updated with the proper range. However, after refocusing for the second time (step 8), selection unlocking uses the previous range (with offset involving filling char sequence).

comment:8 Changed 2 weeks ago by m.lewandowski

  • Milestone set to CKEditor 4.7.0

comment:9 Changed 2 weeks ago by Tade0

While checking one solution to this bug I found another one, that's not related by code, but definitely related from the user's perspective: http://dev.ckeditor.com/ticket/16895#ticket

comment:10 Changed 2 weeks ago by Tade0

  • Owner set to Tade0
  • Status changed from confirmed to review

Cherry-picked the changes made by k.krzton on top of major, updated tags.

Changes pushed to branch:t/14714.

comment:11 Changed 2 weeks ago by Tade0

  • Status changed from review to assigned

comment:12 Changed 2 weeks ago by Tade0

  • Status changed from assigned to review

Added unit tests.

Changes pushed to branch:t/14714.

comment:13 Changed 11 days ago by m.lewandowski

  • Status changed from review to review_failed

Unit tests are failing.

comment:14 Changed 11 days ago by m.lewandowski

  • Owner changed from Tade0 to m.lewandowski
  • Status changed from review_failed to assigned

I'll take over this issue.

comment:15 Changed 10 days ago by m.lewandowski

Tests fixed with git:60b4261ae0.

comment:16 Changed 9 days ago by m.lewandowski

  • Description modified (diff)
  • Summary changed from Divarea - changing tabs and applying styles throws JS error to [Webkit/Blink] Exception thrown on refocusing blurred inline editor

Changed reproduce steps in the summary - the former involved some redundant steps. Adding original TC below:

Steps to reproduce

  1. Open two tabs in Chrome or Opera
  2. Open divarea sample and clear editor contents.
  3. Type text, select Big from styles dropdown, type more text, select Small and type more text
  4. Click on another tab, click on tab with editor and select e.g. Typewriter style from dropdown.

Expected result

No JS error is thrown

Actual result

Code: selection.js 
Line: 1921 
Message: Uncaught IndexSizeError: Failed to execute 'setStart' on 'Range': The offset 22 is larger than or equal to the node's length (15).

Code: style.js
Line: 331 
Message: Uncaught TypeError: Cannot read property 'elements' of null

comment:17 Changed 9 days ago by m.lewandowski

  • Resolution set to fixed
  • Status changed from assigned to closed

Fixed with git:e0e0043f5c.

Note: See TracTickets for help on using tickets.
© 2003 – 2016 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy