fix: SDA-2955 - Switch to default HTML input element (#1187)

src/renderer/components/notification-comp.tsx

@@ -60,8 +60,6 @@ export default class NotificationComp extends React.Component<{}, IState> {
     onKeyUp: (winKey) => (event: keyboardEvent) => this.onKeyUp(event, winKey),
   };
   private flashTimer: NodeJS.Timer | undefined;
-  private customInput: React.RefObject<HTMLSpanElement>;
-  private inputCaret: React.RefObject<HTMLDivElement>;
   private input: React.RefObject<HTMLInputElement>;
 
   constructor(props) {
@@ -83,12 +81,10 @@ export default class NotificationComp extends React.Component<{}, IState> {
       canSendMessage: false,
     };
     this.updateState = this.updateState.bind(this);
-    this.setInputCaretPosition = this.setInputCaretPosition.bind(this);
+    this.onInputChange = this.onInputChange.bind(this);
     this.resetNotificationData = this.resetNotificationData.bind(this);
     this.getInputValue = this.getInputValue.bind(this);
 
-    this.customInput = React.createRef();
-    this.inputCaret = React.createRef();
     this.input = React.createRef();
   }
 
@@ -201,26 +197,12 @@ export default class NotificationComp extends React.Component<{}, IState> {
         >
           <div className='input-container'>
             <div className='input-border' />
-            <div className='input-caret-container'>
-              <span ref={this.customInput} className='custom-input' />
-            </div>
-            <div ref={this.inputCaret} className='input-caret' />
             <input
               style={bgColor}
               className={themeClassName}
               autoFocus={true}
-              onInput={this.setInputCaretPosition}
-              onKeyDown={this.setInputCaretPosition}
               onKeyUp={this.eventHandlers.onKeyUp(id)}
-              onChange={this.setInputCaretPosition}
-              onClick={this.setInputCaretPosition}
-              onPaste={this.setInputCaretPosition}
-              onCut={this.setInputCaretPosition}
-              onCopy={this.setInputCaretPosition}
-              onMouseDown={this.setInputCaretPosition}
-              onMouseUp={this.setInputCaretPosition}
-              onFocus={() => this.animateCaret(true)}
-              onBlur={() => this.animateCaret(false)}
+              onChange={this.onInputChange}
               ref={this.input}
             />
           </div>
@@ -317,7 +299,7 @@ export default class NotificationComp extends React.Component<{}, IState> {
     if (this.input.current) {
       const input = this.input.current.value;
       this.input.current.value = input + '👍';
-      this.setInputCaretPosition();
+      this.onInputChange();
       this.input.current.focus();
     }
   }
@@ -381,49 +363,21 @@ export default class NotificationComp extends React.Component<{}, IState> {
    * @private
    */
   private onKeyUp(event, id) {
-    this.setInputCaretPosition();
     if (event.key === 'Enter' || event.keyCode === 13) {
       this.onReply(id);
     }
   }
 
   /**
-   * Moves the custom input caret based on input text
+   * Updates the send button state based on input change
    * @private
    */
-  private setInputCaretPosition() {
-    if (this.customInput.current) {
-      if (this.input.current) {
-        const inputText = this.input.current.value || '';
-        const selectionStart = this.input.current.selectionStart || 0;
-        this.customInput.current.innerText = inputText
-          .substring(0, selectionStart)
-          .replace(/\n$/, '\n\u0001');
-        this.setState({
-          canSendMessage: inputText.trim().length > 0,
-        });
-      }
-
-      const rects = this.customInput.current.getClientRects();
-      const lastRect = rects && rects[rects.length - 1];
-
-      const x = (lastRect && lastRect.width) || 0;
-      if (this.inputCaret.current) {
-        this.inputCaret.current.style.left = x + 'px';
-      }
-    }
-  }
-
-  /**
-   * Adds blinking animation to input caret
-   * @param hasFocus
-   * @private
-   */
-  private animateCaret(hasFocus: boolean) {
-    if (hasFocus) {
-      this.inputCaret.current?.classList.add('input-caret-focus');
-    } else {
-      this.inputCaret.current?.classList.remove('input-caret-focus');
+  private onInputChange() {
+    if (this.input.current) {
+      const inputText = this.input.current.value || '';
+      this.setState({
+        canSendMessage: inputText.trim().length > 0,
+      });
     }
   }
 
@@ -477,6 +431,5 @@ export default class NotificationComp extends React.Component<{}, IState> {
     if (this.input.current) {
       this.input.current.value = '';
     }
-    this.setInputCaretPosition();
   }
 }

src/renderer/styles/notification-comp.less

@@ -182,9 +182,7 @@ body {
 
 .rte-container {
   width: 100%;
-  height: 38px;
-  position: absolute;
-  bottom: 0;
+  display: flex;
 }
 
 .input-container {
@@ -202,46 +200,6 @@ body {
   margin: 0 8px;
 }
 
-.input-caret-container {
-  position: absolute;
-  left: 8px;
-  top: 60px;
-  opacity: 0;
-  border: 0;
-  padding: 0;
-  margin-bottom: 0;
-  background: transparent;
-  height: 38px;
-  width: @inputWidth;
-  outline: none;
-  color: transparent;
-  text-shadow: 0 0 0 black;
-  z-index: -3;
-  white-space: pre;
-  margin-left: 8px;
-  display: inline-block;
-  max-width: 330px;
-}
-
-.custom-input {
-  font-size: 14px;
-  display: inline-block;
-  max-width: @inputWidth;
-}
-
-.input-caret {
-  position: absolute;
-  width: 2px;
-  height: 20px;
-  border-radius: 1px;
-  margin: 8px 8px;
-  background: transparent;
-}
-
-.input-caret-focus {
-  -webkit-animation: 1s blink step-end infinite;
-}
-
 input {
   width: @inputWidth;
   height: 38px;
@@ -249,7 +207,7 @@ input {
   outline: none;
   margin-left: 8px;
   font-size: 14px;
-  caret-color: transparent;
+  caret-color: #008eff;
   color: var(--text-color);
 }