Switch ConfirmUserActionDialog over to using a Field

res/css/views/dialogs/_ConfirmUserActionDialog.scss

@@ -37,16 +37,4 @@ limitations under the License.
     font-size: $font-14px;
     color: $primary-content;
     background-color: $background;
-
-    border-radius: 3px;
-    border: solid 1px $input-border-color;
-    line-height: $font-36px;
-    padding-left: 16px;
-    padding-right: 16px;
-    padding-top: 1px;
-    padding-bottom: 1px;
-
-    margin-bottom: 24px;
-
-    width: 90%;
 }

src/components/views/dialogs/ConfirmUserActionDialog.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ReactNode } from 'react';
+import React, { ChangeEvent, ReactNode } from 'react';
 import { MatrixClient } from 'matrix-js-sdk/src/client';
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import classNames from "classnames";
@@ -27,6 +27,7 @@ import MemberAvatar from '../avatars/MemberAvatar';
 import BaseAvatar from '../avatars/BaseAvatar';
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
+import Field from '../elements/Field';
 
 interface IProps {
     // matrix-js-sdk (room) member object. Supply either this or 'groupMember'
@@ -48,6 +49,10 @@ interface IProps {
     onFinished: (success: boolean, reason?: string) => void;
 }
 
+interface IState {
+    reason: string;
+}
+
 /*
  * A dialog for confirming an operation on another user.
  * Takes a user ID and a verb, displays the target user prominently
@@ -57,37 +62,50 @@ interface IProps {
  * Also tweaks the style for 'dangerous' actions (albeit only with colour)
  */
 @replaceableComponent("views.dialogs.ConfirmUserActionDialog")
-export default class ConfirmUserActionDialog extends React.Component<IProps> {
-    private reasonField: React.RefObject<HTMLInputElement> = React.createRef();
-
+export default class ConfirmUserActionDialog extends React.Component<IProps, IState> {
     static defaultProps = {
         danger: false,
         askReason: false,
     };
 
-    public onOk = (): void => {
-        this.props.onFinished(true, this.reasonField.current?.value);
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            reason: "",
+        };
+    }
+
+    private onOk = (): void => {
+        this.props.onFinished(true, this.state.reason);
     };
 
-    public onCancel = (): void => {
+    private onCancel = (): void => {
         this.props.onFinished(false);
     };
 
+    private onReasonChange = (ev: ChangeEvent<HTMLInputElement>) => {
+        this.setState({
+            reason: ev.target.value,
+        });
+    };
+
     public render() {
         const confirmButtonClass = this.props.danger ? 'danger' : '';
 
         let reasonBox;
         if (this.props.askReason) {
             reasonBox = (
-                <div>
-                    <form onSubmit={this.onOk}>
-                        <input className="mx_ConfirmUserActionDialog_reasonField"
-                            ref={this.reasonField}
-                            placeholder={_t("Reason")}
-                            autoFocus={true}
-                        />
-                    </form>
-                </div>
+                <form onSubmit={this.onOk}>
+                    <Field
+                        type="text"
+                        onChange={this.onReasonChange}
+                        value={this.state.reason}
+                        className="mx_ConfirmUserActionDialog_reasonField"
+                        label={_t("Reason")}
+                        autoFocus={true}
+                    />
+                </form>
             );
         }