[WIP]Should type in contenteditable div even if it has invisible chil…

…d with contenteditable=false (closes DevExpress#2205)
AlexKamaev · Mar 23, 2018 · 5636020 · 5636020
1 parent 688d723
commit 5636020
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 16 deletions.
diff --git a/src/client/core/utils/content-editable.js b/src/client/core/utils/content-editable.js
@@ -1,5 +1,6 @@
 import * as domUtils from './dom';
 import * as arrayUtils from './array';
+import { isElementVisible } from './position';
 
 
 //nodes utils
@@ -397,6 +398,9 @@ export function calculateNodeAndOffsetByPosition (el, offset) {
             }
         }
         else if (domUtils.isElementNode(target)) {
+            if (!isElementVisible(target))
+                return point;
+
             if (point.offset === 0 && !getContentEditableValue(target).length) {
                 point.node = target;
                 return point;

diff --git a/src/client/core/utils/style.js b/src/client/core/utils/style.js
@@ -135,22 +135,6 @@ export function hasDimensions (el) {
     return el && !(el.offsetHeight <= 0 && el.offsetWidth <= 0);
 }
 
-export function isElementHidden (el) {
-    //NOTE: it's like jquery ':hidden' selector
-    if (get(el, 'display') === 'none' || !hasDimensions(el) || el.type && el.type === 'hidden')
-        return true;
-
-    var elements       = domUtils.findDocument(el).querySelectorAll('*');
-    var hiddenElements = [];
-
-    for (var i = 0; i < elements.length; i++) {
-        if (get(elements[i], 'display') === 'none' || !hasDimensions(elements[i]))
-            hiddenElements.push(elements[i]);
-    }
-
-    return domUtils.containsElement(hiddenElements, el);
-}
-
 export function set (el, style, value) {
     if (typeof style === 'string')
         styleUtils.set(el, style, value);

diff --git a/test/functional/fixtures/regression/gh-2205/pages/index.html b/test/functional/fixtures/regression/gh-2205/pages/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <style>
+        .placeholder {
+            color: #aaa;
+            font-style: italic;
+            height: 0;
+            pointer-events: none;
+        }
+
+        .editor.focused .placeholder {
+            display: none;
+        }
+
+        .editor {
+            padding: 4px 8px 4px 14px;
+            line-height: 1.2;
+            outline: none;
+        }
+
+        .editor {
+            word-wrap: break-word;
+            white-space: pre-wrap;
+            font-variant-ligatures: none;
+        }
+
+        .editor {
+            position: relative;
+        }
+
+        .outer-editor {
+            background: white;
+            color: black;
+            background-clip: padding-box;
+            border-radius: 4px;
+            border: 2px solid rgba(0, 0, 0, 0.2);
+            padding: 5px 0;
+            margin-bottom: 23px;
+        }
+
+        .outer-editor {
+            border: 1px solid grey;
+        }
+
+        .editor p:first-child {
+            margin-top: 10px;
+        }
+
+        .editor p {
+            margin-bottom: 1em;
+        }
+    </style>
+</head>
+<body>
+
+<h2>Has inner div with contentEditable=false</h2>
+
+<div class="outer-editor">
+    <div id="editor" contenteditable="true" class="editor"
+         onmousedown="event.currentTarget.className += ' focused'"></div>
+</div>
+
+<script>
+    function createEditor (editor) {
+        var placeholder = document.createElement('div');
+
+        placeholder.textContent = 'Type here...';
+        placeholder.setAttribute('contenteditable', 'false');
+        placeholder.classList.add('placeholder');
+
+        var paragraph = document.createElement('p');
+        var lineBreak = document.createElement('br');
+
+        paragraph.appendChild(placeholder);
+        paragraph.appendChild(lineBreak);
+        editor.appendChild(paragraph);
+    }
+
+    createEditor(document.getElementById('editor'));
+</script>
+</body>
+</html>
diff --git a/test/functional/fixtures/regression/gh-2205/test.js b/test/functional/fixtures/regression/gh-2205/test.js
@@ -0,0 +1,5 @@
+describe('[Regression](GH-2205)', function () {
+    it('Should type in div if it has an invisible child with contententeditable=false', function () {
+        return runTests('testcafe-fixtures/index.js');
+    });
+});
diff --git a/test/functional/fixtures/regression/gh-2205/testcafe-fixtures/index.js b/test/functional/fixtures/regression/gh-2205/testcafe-fixtures/index.js
@@ -0,0 +1,13 @@
+import { Selector } from 'testcafe';
+
+fixture `GH-2205 - Should type in div if it has an invisible child with contententeditable=false`
+    .page `http://localhost:3000/fixtures/regression/gh-2205/pages/index.html`;
+
+test(`Click on div with placeholder`, async t => {
+    const editor = Selector('#editor');
+
+    await t
+        .click(editor)
+        .typeText(editor, 'Hello')
+        .expect(editor.innerText).contains('Hello');
+});