{"id":3155,"date":"2014-01-09T14:40:34","date_gmt":"2014-01-09T20:40:34","guid":{"rendered":"http:\/\/bililite.com\/blog\/?p=3155"},"modified":"2014-02-26T17:16:04","modified_gmt":"2014-02-26T23:16:04","slug":"odd-bug-with-document-ranges-and-selections","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2014\/01\/09\/odd-bug-with-document-ranges-and-selections\/","title":{"rendered":"Odd bug with document ranges and selections"},"content":{"rendered":"<p>I use <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/DOM\/range\"><code class=\"language-javascript\" >Range<\/code><\/a> and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Selection\"><code class=\"language-javascript\" >Selection<\/code><\/a> extensively in <a href=\"http:\/\/bililite.com\/blog\/2011\/01\/17\/cross-browser-text-ranges-and-selections\/\" title=\"Cross-Browser Text Ranges and Selections\"><code class=\"language-javascript\" >bililiteRange<\/code><\/a> in regular elements in standards-based browsers. I initially implemented scrolling a range by inserting an empty element, using <code class=\"language-javascript\" >scrollIntoView<\/code> on that, then deleting the element.<\/p>\n<p>But it turns out adding and removing elements messes up the selection. So <a href=\"http:\/\/bililite.com\/blog\/2013\/02\/13\/scrolling-to-cross-browser-ranges\/\" title=\"Scrolling to Cross-browser Ranges\">I had to change it<\/a> to manipulate scrollTop directly.<\/p>\n<p><!--more--><\/p>\n<p>It's an odd bug, seeming random. In the following (in a \"real\" browser, Chrome or Firefox) double click on some words, click the button and watch the selection change. Selecting the same text with clicking and dragging does not. I'm not sure what is going on.<\/p>\n<pre><code class=\"language-html demo\" >&lt;pre class=selectiontest contenteditable&gt;\r\n\t&lt;strong&gt;First&lt;\/strong&gt; line.\r\n\t&lt;em&gt;Second&lt;\/em&gt; line.\r\n\tThird line.\r\n&lt;\/pre&gt;\r\n&lt;button class=selectiontest &gt;Modify selection&lt;\/button&gt;<\/code><\/pre>\n<pre><code class=\"language-javascript demo\" >function selectionSize(){\r\n\treturn window.getSelection().getRangeAt(0).toString().length;\r\n}\r\ndocument.querySelector('button.selectiontest').addEventListener('click', function(){\r\n\tvar sel = window.getSelection().getRangeAt(0);\r\n\tconsole.log(selectionSize());\r\n\tvar span = document.createElement('span');\r\n\tsel.insertNode(span);\r\n\tspan.parentNode.removeChild(span);\r\n\tdocument.querySelector('pre.selectiontest').focus();\r\n\tconsole.log(selectionSize());\r\n});<\/code><\/pre>\n<p>This has been <a href=\"http:\/\/stackoverflow.com\/questions\/15766023\/inserting-an-element-into-a-range-clears-the-selection-in-chrome\">mentioned<\/a> <a href=\"http:\/\/stackoverflow.com\/questions\/7733921\/chrome-jumping-caret-bug-with-removechild\">elsewhere<\/a> but no reasons, just workarounds.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I use Range and Selection extensively in bililiteRange in regular elements in standards-based browsers. I initially implemented scrolling a range by inserting an empty element, using scrollIntoView on that, then deleting the element. But it turns out adding and removing elements messes up the selection. So I had to change it to manipulate scrollTop directly.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3155"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=3155"}],"version-history":[{"count":4,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3155\/revisions"}],"predecessor-version":[{"id":3159,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3155\/revisions\/3159"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=3155"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=3155"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=3155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}