Fix: Ensure commentbox event listeners are bound properly (#37)

* Fix: Create highlight dialog CSS styling
* Fix: Ensure commentbox event listeners are bound properly

src/Annotator.scss

@@ -327,6 +327,15 @@ $tablet: 'max-width: 768px';
     }
 }
 
+.bp-create-annotation-dialog .bp-create-comment {
+    background-color: $white;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 9px;
+    white-space: normal;
+    width: 267px; // Hard-coded width to solve layout issues
+}
+
 .bp-point-annotation-marker {
     background-color: transparent;
     border-style: none;

src/CommentBox.js

@@ -87,6 +87,11 @@ class CommentBox extends EventEmitter {
         this.placeholderText = config.localized.addCommentPlaceholder;
 
         this.containerEl = this.createCommentBox();
+
+        // Explicit scope binding for event listeners
+        this.focus = this.focus.bind(this);
+        this.onCancel = this.onCancel.bind(this);
+        this.onPost = this.onPost.bind(this);
     }
 
     /**
@@ -271,10 +276,10 @@ class CommentBox extends EventEmitter {
         // Add event listeners
 
         if (this.hasTouch) {
-            this.textAreaEl.addEventListener('focus', this.focus.bind(this));
+            this.textAreaEl.addEventListener('focus', this.focus);
             containerEl.addEventListener('touchend', this.preventDefaultAndPropagation.bind(this));
-            this.cancelEl.addEventListener('touchend', this.onCancel.bind(this));
-            this.postEl.addEventListener('touchend', this.onPost.bind(this));
+            this.cancelEl.addEventListener('touchend', this.onCancel);
+            this.postEl.addEventListener('touchend', this.onPost);
         } else {
             this.textAreaEl.addEventListener('focus', this.focus);
             this.cancelEl.addEventListener('click', this.onCancel);