Make textarea positioning work with css transformations on parent ele…

…ments
xtermjs · Jan 27, 2019 · 2a1f25e · 2a1f25e
1 parent c908da3
commit 2a1f25e
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 21 deletions.
diff --git a/src/Terminal.ts b/src/Terminal.ts
@@ -566,12 +566,12 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
       // Firefox doesn't appear to fire the contextmenu event on right click
       this.register(addDisposableDomListener(this.element, 'mousedown', (event: MouseEvent) => {
         if (event.button === 2) {
-          rightClickHandler(event, this.textarea, this.selectionManager, this.options.rightClickSelectsWord);
+          rightClickHandler(event, this, this.selectionManager, this.options.rightClickSelectsWord);
         }
       }));
     } else {
       this.register(addDisposableDomListener(this.element, 'contextmenu', (event: MouseEvent) => {
-        rightClickHandler(event, this.textarea, this.selectionManager, this.options.rightClickSelectsWord);
+        rightClickHandler(event, this, this.selectionManager, this.options.rightClickSelectsWord);
       }));
     }
 
@@ -583,7 +583,7 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
       // that the regular click event doesn't fire for the middle mouse button.
       this.register(addDisposableDomListener(this.element, 'auxclick', (event: MouseEvent) => {
         if (event.button === 1) {
-          moveTextAreaUnderMouseCursor(event, this.textarea);
+          moveTextAreaUnderMouseCursor(event, this);
         }
       }));
     }

diff --git a/src/ui/Clipboard.ts b/src/ui/Clipboard.ts
@@ -85,26 +85,32 @@ export function pasteHandler(ev: ClipboardEvent, term: ITerminal): void {
  * @param ev The original right click event to be handled.
  * @param textarea The terminal's textarea.
  */
-export function moveTextAreaUnderMouseCursor(ev: MouseEvent, textarea: HTMLTextAreaElement): void {
+export function moveTextAreaUnderMouseCursor(ev: MouseEvent, term: ITerminal): void {
+
+  // Calculate textarea position relative to the screen element
+  const pos = term.screenElement.getBoundingClientRect();
+  const left = ev.clientX - pos.left - 10;
+  const top = ev.clientY - pos.top - 10;
+
   // Bring textarea at the cursor position
-  textarea.style.position = 'fixed';
-  textarea.style.width = '20px';
-  textarea.style.height = '20px';
-  textarea.style.left = (ev.clientX - 10) + 'px';
-  textarea.style.top = (ev.clientY - 10) + 'px';
-  textarea.style.zIndex = '1000';
+  term.textarea.style.position = 'absolute';
+  term.textarea.style.width = '20px';
+  term.textarea.style.height = '20px';
+  term.textarea.style.left = `${left}px`;
+  term.textarea.style.top = `${top}px`;
+  term.textarea.style.zIndex = '1000';
 
-  textarea.focus();
+  term.textarea.focus();
 
   // Reset the terminal textarea's styling
   // Timeout needs to be long enough for click event to be handled.
   setTimeout(() => {
-    textarea.style.position = null;
-    textarea.style.width = null;
-    textarea.style.height = null;
-    textarea.style.left = null;
-    textarea.style.top = null;
-    textarea.style.zIndex = null;
+    term.textarea.style.position = null;
+    term.textarea.style.width = null;
+    term.textarea.style.height = null;
+    term.textarea.style.left = null;
+    term.textarea.style.top = null;
+    term.textarea.style.zIndex = null;
   }, 200);
 }
 
@@ -115,14 +121,14 @@ export function moveTextAreaUnderMouseCursor(ev: MouseEvent, textarea: HTMLTextA
  * @param selectionManager The terminal's selection manager.
  * @param shouldSelectWord If true and there is no selection the current word will be selected
  */
-export function rightClickHandler(ev: MouseEvent, textarea: HTMLTextAreaElement, selectionManager: ISelectionManager, shouldSelectWord: boolean): void {
-  moveTextAreaUnderMouseCursor(ev, textarea);
+export function rightClickHandler(ev: MouseEvent, term: ITerminal, selectionManager: ISelectionManager, shouldSelectWord: boolean): void {
+  moveTextAreaUnderMouseCursor(ev, term);
 
   if (shouldSelectWord && !selectionManager.isClickInSelection(ev)) {
     selectionManager.selectWordAtCursor(ev);
   }
 
   // Get textarea ready to copy from the context menu
-  textarea.value = selectionManager.selectionText;
-  textarea.select();
+  term.textarea.value = selectionManager.selectionText;
+  term.textarea.select();
 }