Extend Field and InfoDialog with more configurability

src/components/views/dialogs/InfoDialog.js

@@ -31,6 +31,7 @@ export default class InfoDialog extends React.Component {
         onFinished: PropTypes.func,
         hasCloseButton: PropTypes.bool,
         onKeyDown: PropTypes.func,
+        fixedWidth: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -54,6 +55,7 @@ export default class InfoDialog extends React.Component {
                 contentId='mx_Dialog_content'
                 hasCancel={this.props.hasCloseButton}
                 onKeyDown={this.props.onKeyDown}
+                fixedWidth={this.props.fixedWidth}
             >
                 <div className={classNames("mx_Dialog_content", this.props.className)} id="mx_Dialog_content">
                     { this.props.description }

src/components/views/elements/Field.tsx

@@ -61,6 +61,10 @@ interface IProps {
     tooltipClassName?: string;
     // If specified, an additional class name to apply to the field container
     className?: string;
+    // On what events should validation occur; by default on all
+    validateOnFocus?: boolean;
+    validateOnBlur?: boolean;
+    validateOnChange?: boolean;
     // All other props pass through to the <input>.
 }
 
@@ -100,6 +104,9 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
     public static readonly defaultProps = {
         element: "input",
         type: "text",
+        validateOnFocus: true,
+        validateOnBlur: true,
+        validateOnChange: true,
     };
 
     /*
@@ -137,9 +144,11 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
         this.setState({
             focused: true,
         });
-        this.validate({
-            focused: true,
-        });
+        if (this.props.validateOnFocus) {
+            this.validate({
+                focused: true,
+            });
+        }
         // Parent component may have supplied its own `onFocus` as well
         if (this.props.onFocus) {
             this.props.onFocus(ev);
@@ -147,7 +156,9 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
     };
 
     private onChange = (ev) => {
-        this.validateOnChange();
+        if (this.props.validateOnChange) {
+            this.validateOnChange();
+        }
         // Parent component may have supplied its own `onChange` as well
         if (this.props.onChange) {
             this.props.onChange(ev);
@@ -158,9 +169,11 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
         this.setState({
             focused: false,
         });
-        this.validate({
-            focused: false,
-        });
+        if (this.props.validateOnBlur) {
+            this.validate({
+                focused: false,
+            });
+        }
         // Parent component may have supplied its own `onBlur` as well
         if (this.props.onBlur) {
             this.props.onBlur(ev);