Fix double clicking reason and glossary text

3 files changed, 20 insertions, 5 deletions

diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 8bbd5731..b70ede90 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -249,7 +249,7 @@ button.action-button {
     display: inline-block;
 }
 
-.term-reasons>.term-reason+.term-reason:before {
+.term-reasons>.term-reason+.term-reason-separator+.term-reason:before {
     content: " \00AB  "; /* The two spaces is not a typo */
     display: inline;
 }
@@ -468,3 +468,13 @@ button.action-button {
     padding-left: 1.4em;
     list-style-type: decimal;
 }
+
+.term-glossary-separator,
+.term-reason-separator {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    font-size: 0;
+    opacity: 0;
+    white-space: pre;
+}
diff --git a/ext/mixed/display-templates.html b/ext/mixed/display-templates.html
index eda9abd9..e762f66b 100644
--- a/ext/mixed/display-templates.html
+++ b/ext/mixed/display-templates.html
@@ -31,8 +31,8 @@
     <ul class="term-glossary-list"></ul>
 </li></template>
 <template id="term-definition-only-template"><span class="term-definition-only"></span></template>
-<template id="term-glossary-item-template"><li class="term-glossary-item"><span class="term-glossary"></span></li></template>
-<template id="term-reason-template"><span class="term-reason"></span></template>
+<template id="term-glossary-item-template"><li class="term-glossary-item"><span class="term-glossary"></span><span class="term-glossary-separator">&#10;</span></li></template>
+<template id="term-reason-template"><span class="term-reason"></span><span class="term-reason-separator">&#10;</span></template>
 
 <template id="kanji-entry-template"><div class="entry" data-type="kanji">
     <div class="entry-header1">
diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js
index 8c39d380..0a57df80 100644
--- a/ext/mixed/js/display-generator.js
+++ b/ext/mixed/js/display-generator.js
@@ -110,10 +110,11 @@ class DisplayGenerator {
     }
 
     createTermReason(reason) {
-        const node = DisplayGenerator._instantiateTemplate(this._termReasonTemplate);
+        const fragment = DisplayGenerator._instantiateTemplateFragment(this._termReasonTemplate);
+        const node = fragment.querySelector('.term-reason');
         node.textContent = reason;
         node.dataset.reason = reason;
-        return node;
+        return fragment;
     }
 
     createTermDefinitionItem(details) {
@@ -378,4 +379,8 @@ class DisplayGenerator {
     static _instantiateTemplate(template) {
         return document.importNode(template.content.firstChild, true);
     }
+
+    static _instantiateTemplateFragment(template) {
+        return document.importNode(template.content, true);
+    }
 }