Fix react function refs returning things

This is incompatible with React 19

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/async-components/views/dialogs/security/ExportE2eKeysDialog.tsx

@@ -178,7 +178,9 @@ export default class ExportE2eKeysDialog extends React.Component<IProps, IState>
                                     type="password"
                                     disabled={disableForm}
                                     autoComplete="new-password"
-                                    fieldRef={(field) => (this.fieldPassword = field)}
+                                    fieldRef={(field) => {
+                                        this.fieldPassword = field;
+                                    }}
                                 />
                             </div>
                             <div className="mx_E2eKeysDialog_inputRow">
@@ -195,7 +197,9 @@ export default class ExportE2eKeysDialog extends React.Component<IProps, IState>
                                     type="password"
                                     disabled={disableForm}
                                     autoComplete="new-password"
-                                    fieldRef={(field) => (this.fieldPasswordConfirm = field)}
+                                    fieldRef={(field) => {
+                                        this.fieldPasswordConfirm = field;
+                                    }}
                                 />
                             </div>
                         </div>

src/components/structures/auth/ForgotPassword.tsx

@@ -388,7 +388,9 @@ export default class ForgotPassword extends React.Component<Props, State> {
                                 label={_td("auth|change_password_new_label")}
                                 value={this.state.password}
                                 minScore={PASSWORD_MIN_SCORE}
-                                fieldRef={(field) => (this.fieldPassword = field)}
+                                fieldRef={(field) => {
+                                    this.fieldPassword = field;
+                                }}
                                 onChange={this.onInputChanged.bind(this, "password")}
                                 autoComplete="new-password"
                             />
@@ -399,7 +401,9 @@ export default class ForgotPassword extends React.Component<Props, State> {
                                 labelInvalid={_td("auth|reset_password|passwords_mismatch")}
                                 value={this.state.password2}
                                 password={this.state.password}
-                                fieldRef={(field) => (this.fieldPasswordConfirm = field)}
+                                fieldRef={(field) => {
+                                    this.fieldPasswordConfirm = field;
+                                }}
                                 onChange={this.onInputChanged.bind(this, "password2")}
                                 autoComplete="new-password"
                             />

src/components/views/auth/RegistrationForm.tsx

@@ -456,7 +456,9 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
             : _td("auth|registration|continue_without_email_field_label");
         return (
             <EmailField
-                fieldRef={(field) => (this[RegistrationField.Email] = field)}
+                fieldRef={(field) => {
+                    this[RegistrationField.Email] = field;
+                }}
                 label={emailLabel}
                 value={this.state.email}
                 validationRules={this.validateEmailRules.bind(this)}
@@ -471,7 +473,9 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         return (
             <PassphraseField
                 id="mx_RegistrationForm_password"
-                fieldRef={(field) => (this[RegistrationField.Password] = field)}
+                fieldRef={(field) => {
+                    this[RegistrationField.Password] = field;
+                }}
                 minScore={PASSWORD_MIN_SCORE}
                 value={this.state.password}
                 onChange={this.onPasswordChange}
@@ -486,7 +490,9 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         return (
             <PassphraseConfirmField
                 id="mx_RegistrationForm_passwordConfirm"
-                fieldRef={(field) => (this[RegistrationField.PasswordConfirm] = field)}
+                fieldRef={(field) => {
+                    this[RegistrationField.PasswordConfirm] = field;
+                }}
                 autoComplete="new-password"
                 value={this.state.passwordConfirm}
                 password={this.state.password}
@@ -513,9 +519,9 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
             />
         );
         return (
-            (<Field
+            <Field
-                ref={field => {
+                ref={(field) => {
-                    (this[RegistrationField.PhoneNumber] = field);
+                    this[RegistrationField.PhoneNumber] = field;
                 }}
                 type="text"
                 label={phoneLabel}
@@ -523,16 +529,16 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
                 prefixComponent={phoneCountry}
                 onChange={this.onPhoneNumberChange}
                 onValidate={this.onPhoneNumberValidate}
-            />)
+            />
         );
     }
 
     public renderUsername(): ReactNode {
         return (
-            (<Field
+            <Field
                 id="mx_RegistrationForm_username"
-                ref={field => {
+                ref={(field) => {
-                    (this[RegistrationField.Username] = field);
+                    this[RegistrationField.Username] = field;
                 }}
                 type="text"
                 autoFocus={true}
@@ -544,7 +550,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
                 tooltipAlignment={this.tooltipAlignment()}
                 autoCorrect="off"
                 autoCapitalize="none"
-            />)
+            />
         );
     }
 

src/components/views/messages/CodeBlock.tsx

@@ -119,7 +119,9 @@ const CodeBlock: React.FC<Props> = ({ children, onHeightChanged }) => {
                 <div
                     style={{ display: "contents" }}
                     dangerouslySetInnerHTML={{ __html: children.innerHTML }}
-                    ref={highlightCode}
+                    ref={(div) => {
+                        highlightCode(div);
+                    }}
                 />
             </pre>
             {expandCollapseButton}

src/components/views/settings/ChangePassword.tsx

@@ -327,11 +327,11 @@ export default class ChangePassword extends React.Component<IProps, IState> {
         switch (this.state.phase) {
             case Phase.Edit:
                 return (
-                    (<form className={this.props.className} onSubmit={this.onClickChange}>
+                    <form className={this.props.className} onSubmit={this.onClickChange}>
                         <div className={rowClassName}>
                             <Field
-                                ref={field => {
+                                ref={(field) => {
-                                    (this[FIELD_OLD_PASSWORD] = field);
+                                    this[FIELD_OLD_PASSWORD] = field;
                                 }}
                                 type="password"
                                 label={_t("auth|change_password_current_label")}
@@ -342,7 +342,9 @@ export default class ChangePassword extends React.Component<IProps, IState> {
                         </div>
                         <div className={rowClassName}>
                             <PassphraseField
-                                fieldRef={(field) => (this[FIELD_NEW_PASSWORD] = field)}
+                                fieldRef={(field) => {
+                                    this[FIELD_NEW_PASSWORD] = field;
+                                }}
                                 type="password"
                                 label={_td("auth|change_password_new_label")}
                                 minScore={PASSWORD_MIN_SCORE}
@@ -355,8 +357,8 @@ export default class ChangePassword extends React.Component<IProps, IState> {
                         </div>
                         <div className={rowClassName}>
                             <Field
-                                ref={field => {
+                                ref={(field) => {
-                                    (this[FIELD_NEW_PASSWORD_CONFIRM] = field);
+                                    this[FIELD_NEW_PASSWORD_CONFIRM] = field;
                                 }}
                                 type="password"
                                 label={_t("auth|change_password_confirm_label")}
@@ -373,7 +375,7 @@ export default class ChangePassword extends React.Component<IProps, IState> {
                         >
                             {this.props.buttonLabel || _t("auth|change_password_action")}
                         </AccessibleButton>
-                    </form>)
+                    </form>
                 );
             case Phase.Uploading:
                 return (

test/unit-tests/components/structures/FilePanel-test.tsx

@@ -65,7 +65,9 @@ describe("FilePanel", () => {
                     roomId={room.roomId}
                     onClose={jest.fn()}
                     resizeNotifier={new ResizeNotifier()}
-                    ref={(ref) => (filePanel = ref)}
+                    ref={(ref) => {
+                        filePanel = ref;
+                    }}
                 />,
             );
             await screen.findByText("No files visible in this room");

test/unit-tests/components/structures/TimelinePanel-test.tsx

@@ -204,7 +204,9 @@ describe("TimelinePanel", () => {
                     timelineSet={timelineSet}
                     manageReadMarkers={true}
                     manageReadReceipts={true}
-                    ref={(ref) => (timelinePanel = ref)}
+                    ref={(ref) => {
+                        timelinePanel = ref;
+                    }}
                 />,
             );
             await flushPromises();