fix: prevent overriding event handlers in MessageInput's Textarea com…

…ponent (#2006)
GetStream · May 5, 2023 · 569c53d · 569c53d
1 parent 33411b8
commit 569c53d
Showing 1 changed file with 41 additions and 10 deletions.
diff --git a/src/components/AutoCompleteTextarea/Textarea.jsx b/src/components/AutoCompleteTextarea/Textarea.jsx
@@ -13,8 +13,8 @@ import {
   triggerPropsCheck,
 } from './utils';
 
-import { CommandItem } from '../CommandItem/CommandItem';
-import { UserItem } from '../UserItem/UserItem';
+import { CommandItem } from '../CommandItem';
+import { UserItem } from '../UserItem';
 
 export class ReactTextareaAutocomplete extends React.Component {
   static defaultProps = {
@@ -687,6 +687,16 @@ export class ReactTextareaAutocomplete extends React.Component {
 
   render() {
     const { className, containerClassName, containerStyle, style } = this.props;
+    const {
+      onBlur,
+      onChange,
+      onClick,
+      onFocus,
+      onKeyDown,
+      onScroll,
+      onSelect,
+      ...restAdditionalTextareaProps
+    } = this.props.additionalTextareaProps || {};
 
     let { maxRows } = this.props;
 
@@ -711,20 +721,41 @@ export class ReactTextareaAutocomplete extends React.Component {
           {...this._cleanUpProps()}
           className={clsx('rta__textarea', className)}
           maxRows={maxRows}
-          onBlur={this._onClickAndBlurHandler}
-          onChange={this._changeHandler}
-          onClick={this._onClickAndBlurHandler}
-          onFocus={this.props.onFocus}
-          onKeyDown={this._handleKeyDown}
-          onScroll={this._onScrollHandler}
-          onSelect={this._selectHandler}
+          onBlur={(e) => {
+            this._onClickAndBlurHandler(e);
+            onBlur?.(e);
+          }}
+          onChange={(e) => {
+            this._changeHandler(e);
+            onChange?.(e);
+          }}
+          onClick={(e) => {
+            this._onClickAndBlurHandler(e);
+            onClick?.(e);
+          }}
+          onFocus={(e) => {
+            this.props.onFocus?.(e);
+            onFocus?.(e);
+          }}
+          onKeyDown={(e) => {
+            this._handleKeyDown(e);
+            onKeyDown?.(e);
+          }}
+          onScroll={(e) => {
+            this._onScrollHandler(e);
+            onScroll?.(e);
+          }}
+          onSelect={(e) => {
+            this._selectHandler(e);
+            onSelect?.(e);
+          }}
           ref={(ref) => {
             this.props?.innerRef(ref);
             this.textareaRef = ref;
           }}
           style={style}
           value={value}
-          {...this.props.additionalTextareaProps}
+          {...restAdditionalTextareaProps}
           defaultValue={undefined}
         />
       </div>