Remove react-autosize-textarea

package.json

@@ -30,6 +30,7 @@
     "@types/timeago": "^1.6.0",
     "@types/unist": "^2.0.6",
     "autoprefixer": "^9.8.6",
+    "autosize": "^6.0.1",
     "blueimp-file-upload": "^9.11.2",
     "bootstrap": "^3.3.6",
     "chokidar": "^3.5.2",
@@ -73,7 +74,6 @@
     "postcss-loader": "^3.0.0",
     "qtip2": "https://github.com/notbakaneko/qTip2.git#cd5f038667d2b23a44f4274c46de01834d704ce6",
     "react": "^17.0.2",
-    "react-autosize-textarea": "7.0.0",
     "react-dom": "^17.0.2",
     "react-dom-factories": "^1.0.0",
     "react-markdown": "^8.0.5",
@@ -101,6 +101,7 @@
     "yargs": "^12.0.5"
   },
   "devDependencies": {
+    "@types/autosize": "^4.0.1",
     "@typescript-eslint/eslint-plugin": "^5.29.0",
     "@typescript-eslint/parser": "^5.29.0",
     "deasync": "^0.1.26",

resources/js/beatmap-discussions/new-discussion.tsx

@@ -4,6 +4,7 @@
 import { DiscussionType, discussionTypeIcons, discussionTypes } from 'beatmap-discussions/discussion-type';
 import BigButton from 'components/big-button';
 import StringWithComponent from 'components/string-with-component';
+import TextareaAutosize from 'components/textarea-autosize';
 import TimeWithTooltip from 'components/time-with-tooltip';
 import UserAvatar from 'components/user-avatar';
 import BeatmapExtendedJson from 'interfaces/beatmap-extended-json';
@@ -16,7 +17,6 @@ import { action, computed, makeObservable, observable, runInAction } from 'mobx'
 import { observer } from 'mobx-react';
 import core from 'osu-core-singleton';
 import * as React from 'react';
-import TextareaAutosize from 'react-autosize-textarea';
 import { onError } from 'utils/ajax';
 import { canModeratePosts, formatTimestamp, makeUrl, NearbyDiscussion, nearbyDiscussions, parseTimestamp, validMessageLength } from 'utils/beatmapset-discussion-helper';
 import { downloadLimited, nominationsCount } from 'utils/beatmapset-helper';
@@ -391,9 +391,9 @@ export class NewDiscussion extends React.Component<Props> {
     return (
       <>
         <TextareaAutosize
-          ref={this.inputBox}
           className={`${bn}__message-area js-hype--input`}
           disabled={this.posting != null || !this.canPost}
+          innerRef={this.inputBox}
           onChange={this.setMessage}
           onFocus={this.onFocus}
           onKeyDown={this.handleKeyDown}

resources/js/beatmap-discussions/new-reply.tsx

@@ -2,6 +2,7 @@
 // See the LICENCE file in the repository root for full licence text.
 
 import BigButton from 'components/big-button';
+import TextareaAutosize from 'components/textarea-autosize';
 import UserAvatar from 'components/user-avatar';
 import BeatmapJson from 'interfaces/beatmap-json';
 import BeatmapsetDiscussionJson from 'interfaces/beatmapset-discussion-json';
@@ -12,7 +13,6 @@ import { action, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import core from 'osu-core-singleton';
 import * as React from 'react';
-import TextareaAutosize from 'react-autosize-textarea';
 import { onError } from 'utils/ajax';
 import { validMessageLength } from 'utils/beatmapset-discussion-helper';
 import { InputEventType, makeTextAreaHandler, TextAreaCallback } from 'utils/input-handler';
@@ -182,9 +182,9 @@ export class NewReply extends React.Component<Props> {
           </div>
           <div className={`${bn}__message-container`}>
             <TextareaAutosize
-              ref={this.box}
               className={`${bn}__message ${bn}__message--editor`}
               disabled={this.posting != null}
+              innerRef={this.box}
               onChange={this.handleChange}
               onKeyDown={this.handleKeyDown}
               placeholder={trans('beatmaps.discussions.reply_placeholder')}

resources/js/beatmap-discussions/post.tsx

@@ -9,6 +9,7 @@ import BigButton from 'components/big-button';
 import ClickToCopy from 'components/click-to-copy';
 import { ReportReportable } from 'components/report-reportable';
 import StringWithComponent from 'components/string-with-component';
+import TextareaAutosize from 'components/textarea-autosize';
 import TimeWithTooltip from 'components/time-with-tooltip';
 import UserLink from 'components/user-link';
 import BeatmapExtendedJson from 'interfaces/beatmap-extended-json';
@@ -25,7 +26,6 @@ import { disposeOnUnmount, observer } from 'mobx-react';
 import { deletedUser, deletedUserJson } from 'models/user';
 import core from 'osu-core-singleton';
 import * as React from 'react';
-import TextareaAutosize from 'react-autosize-textarea';
 import { onError } from 'utils/ajax';
 import { badgeGroup, canModeratePosts, makeUrl, validMessageLength } from 'utils/beatmapset-discussion-helper';
 import { downloadLimited } from 'utils/beatmapset-helper';
@@ -307,9 +307,9 @@ export default class Post extends React.Component<Props> {
         ) : (
           <>
             <TextareaAutosize
-              ref={this.textareaRef}
               className={`${bn}__message ${bn}__message--editor`}
               disabled={this.isPosting}
+              innerRef={this.textareaRef}
               onChange={this.handleTextareaChange}
               onKeyDown={this.handleTextareaKeyDown}
               style={{ minHeight: this.textareaMinHeight }}

resources/js/chat/input-box.tsx

@@ -4,14 +4,14 @@
 import { ChatMessageSendAction } from 'actions/chat-message-send-action';
 import { dispatch } from 'app-dispatcher';
 import BigButton from 'components/big-button';
+import TextareaAutosize from 'components/textarea-autosize';
 import { trim } from 'lodash';
 import { action, autorun, computed, makeObservable, reaction } from 'mobx';
 import { disposeOnUnmount, observer } from 'mobx-react';
 import { maxMessageLength } from 'models/chat/channel';
 import Message from 'models/chat/message';
 import core from 'osu-core-singleton';
 import * as React from 'react';
-import TextareaAutosize from 'react-autosize-textarea';
 import { classWithModifiers } from 'utils/css';
 import { trans } from 'utils/lang';
 import { isModalShowing } from 'utils/modal-helper';
@@ -109,10 +109,10 @@ export default class InputBox extends React.Component<Props> {
     return (
       <div className='chat-input'>
         <TextareaAutosize
-          ref={this.inputBoxRef}
           autoComplete='off'
           className={classWithModifiers('chat-input__box', { disabled: this.inputDisabled })}
           disabled={this.inputDisabled}
+          innerRef={this.inputBoxRef}
           maxLength={channel?.messageLengthLimit ?? maxMessageLength}
           maxRows={channel?.type === 'ANNOUNCE' ? 10 : 3}
           name='textbox'

resources/js/components/comment-editor.tsx

@@ -1,13 +1,13 @@
 // Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
 // See the LICENCE file in the repository root for full licence text.
 
+import TextareaAutosize from 'components/textarea-autosize';
 import { CommentableMetaJson } from 'interfaces/comment-json';
 import { action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import Comment from 'models/comment';
 import core from 'osu-core-singleton';
 import * as React from 'react';
-import TextareaAutosize from 'react-autosize-textarea';
 import { classWithModifiers, Modifiers } from 'utils/css';
 import { InputEventType, makeTextAreaHandler, TextAreaCallback } from 'utils/input-handler';
 import { trans } from 'utils/lang';
@@ -115,9 +115,9 @@ export default class CommentEditor extends React.Component<Props> {
         }
 
         <TextareaAutosize
-          ref={this.textarea}
           className={`${bn}__message`}
           disabled={!this.canComment || this.posting}
+          innerRef={this.textarea}
           onChange={this.onChange}
           onKeyDown={this.handleKeyDown}
           placeholder={this.placeholder}
@@ -188,7 +188,7 @@ export default class CommentEditor extends React.Component<Props> {
   };
 
   @action
-  private readonly onChange = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+  private readonly onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     this.message = e.currentTarget.value;
   };
 

resources/js/components/textarea-autosize.tsx

@@ -0,0 +1,69 @@
+// Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+import autosize from 'autosize';
+import React from 'react';
+
+interface Props extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  async: boolean;
+  innerRef?: React.RefObject<HTMLTextAreaElement>;
+  maxRows?: number;
+}
+
+export default class TextareaAutosize extends React.Component<Props> {
+  static readonly defaultProps = {
+    async: false,
+    rows: 1,
+  };
+
+  private lineHeight?: number;
+  private ref = this.props.innerRef ?? React.createRef<HTMLTextAreaElement>();
+
+  private get maxHeight() {
+    return this.props.maxRows != null && this.lineHeight
+      ? Math.ceil(this.lineHeight * this.props.maxRows)
+      : null;
+  }
+
+  componentDidMount() {
+    if (this.ref.current == null) return;
+
+    if (this.props.maxRows != null) {
+      this.lineHeight = parseFloat(window.getComputedStyle(this.ref.current).getPropertyValue('line-height'));
+    }
+
+    if (this.props.maxRows != null || this.props.async) {
+      window.setTimeout(() => {
+        if (this.ref.current != null) {
+          autosize(this.ref.current);
+        }
+      }, 0);
+    } else {
+      autosize(this.ref.current);
+    }
+  }
+
+  componentDidUpdate() {
+    if (this.ref.current == null) return;
+    autosize.update(this.ref.current);
+  }
+
+  componentWillUnmount() {
+    if (this.ref.current == null) return;
+    autosize.destroy(this.ref.current);
+  }
+
+  render() {
+    const { async, innerRef, maxRows, style, ...otherProps } = this.props;
+
+    const maxHeight = this.maxHeight;
+
+    return (
+      <textarea
+        ref={this.ref}
+        style={maxHeight != null ? { ...style, maxHeight } : style}
+        {...otherProps}
+      />
+    );
+  }
+}

resources/js/oauth/client-details.tsx

@@ -2,13 +2,13 @@
 // See the LICENCE file in the repository root for full licence text.
 
 import { Spinner } from 'components/spinner';
+import TextareaAutosize from 'components/textarea-autosize';
 import { FormErrors } from 'form-errors';
 import { action, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { OwnClient as Client } from 'models/oauth/own-client';
 import core from 'osu-core-singleton';
 import * as React from 'react';
-import TextareaAutosize from 'react-autosize-textarea';
 import { onError } from 'utils/ajax';
 import { classWithModifiers } from 'utils/css';
 import { trans } from 'utils/lang';

resources/js/oauth/new-client.tsx

@@ -3,6 +3,7 @@
 
 import { Spinner } from 'components/spinner';
 import StringWithComponent from 'components/string-with-component';
+import TextareaAutosize from 'components/textarea-autosize';
 import { ValidatingInput } from 'components/validating-input';
 import { FormErrors } from 'form-errors';
 import { OwnClientJson } from 'interfaces/own-client-json';
@@ -11,7 +12,6 @@ import { action, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import core from 'osu-core-singleton';
 import * as React from 'react';
-import TextareaAutosize from 'react-autosize-textarea';
 import { classWithModifiers } from 'utils/css';
 import { trans } from 'utils/lang';
 

yarn.lock

@@ -327,6 +327,11 @@
   resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
   integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
 
+"@types/autosize@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@types/autosize/-/autosize-4.0.1.tgz#999a7c305b96766248044ebaac1a0299961f3b61"
+  integrity sha512-iPJT/FCaSO79G6j+9n6gmFc5nhxZ1gDrA2UAvb5FslJ6FJQZnDfbBU0qp5vpp0Cbjj7+gOyjuWZ7RrXvRuETaA==
+
 "@types/bootstrap@^3.3.0":
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/@types/bootstrap/-/bootstrap-3.4.0.tgz#7e74a2421b3984ce53ab459e979a99a78dd802c6"
@@ -1318,10 +1323,10 @@ autoprefixer@^9.8.6:
     postcss "^7.0.32"
     postcss-value-parser "^4.1.0"
 
-autosize@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/autosize/-/autosize-4.0.2.tgz#073cfd07c8bf45da4b9fd153437f5bafbba1e4c9"
-  integrity sha512-jnSyH2d+qdfPGpWlcuhGiHmqBJ6g3X+8T+iRwFrHPLVcdoGJE/x6Qicm6aDHfTsbgZKxyV8UU/YB2p4cjKDRRA==
+autosize@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/autosize/-/autosize-6.0.1.tgz#64ee78dd7029be959eddd3afbbd33235b957e10f"
+  integrity sha512-f86EjiUKE6Xvczc4ioP1JBlWG7FKrE13qe/DxBCpe8GCipCq2nFw73aO8QEBKHfSbYGDN5eB9jXWKen7tspDqQ==
 
 aws-sign2@~0.7.0:
   version "0.7.0"
@@ -2002,11 +2007,6 @@ compute-scroll-into-view@^1.0.17:
   resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.17.tgz#6a88f18acd9d42e9cf4baa6bec7e0522607ab7ab"
   integrity sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg==
 
-computed-style@~0.1.3:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/computed-style/-/computed-style-0.1.4.tgz#7f344fd8584b2e425bedca4a1afc0e300bb05d74"
-  integrity sha1-fzRP2FhLLkJb7cpKGvwOMAuwXXQ=
-
 [email protected]:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -4953,13 +4953,6 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-line-height@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/line-height/-/line-height-0.3.1.tgz#4b1205edde182872a5efa3c8f620b3187a9c54c9"
-  integrity sha1-SxIF7d4YKHKl76PI9iCzGHqcVMk=
-  dependencies:
-    computed-style "~0.1.3"
-
 lines-and-columns@^1.1.6:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
@@ -6602,7 +6595,7 @@ promise-inflight@^1.0.1:
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
   integrity sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==
 
-prop-types@^15.0.0, prop-types@^15.5.6, prop-types@^15.6.2, prop-types@^15.8.1:
+prop-types@^15.0.0, prop-types@^15.6.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -6730,15 +6723,6 @@ [email protected]:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-[email protected]:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/react-autosize-textarea/-/react-autosize-textarea-7.0.0.tgz#4f633e4238de7ba73c1da8fdc307353c50f1c5ab"
-  integrity sha512-rGQLpGUaELvzy3NKzp0kkcppaUtZTptsyR0PGuLotaJDjwRbT0DpD000yCzETpXseJQ/eMsyVGDDHXjXP93u8w==
-  dependencies:
-    autosize "^4.0.2"
-    line-height "^0.3.1"
-    prop-types "^15.5.6"
-
 react-dom-factories@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/react-dom-factories/-/react-dom-factories-1.0.2.tgz#eb7705c4db36fb501b3aa38ff759616aa0ff96e0"