Merge pull request #6394 from matrix-org/dbkr/exorcise_homeserver_checkbox

Fix bug where 'other homeserver' would unfocus

Author: dbkr

res/css/views/elements/_StyledRadioButton.scss

@@ -46,7 +46,7 @@ limitations under the License.
         width: $font-16px;
     }
 
-    > input[type=radio] {
+    input[type=radio] {
         // Remove the OS's representation
         margin: 0;
         padding: 0;
@@ -112,6 +112,12 @@ limitations under the License.
             }
         }
     }
+
+    .mx_RadioButton_innerLabel {
+        display: flex;
+        position: relative;
+        top: 4px;
+    }
 }
 
 .mx_RadioButton_outlined {

src/components/views/dialogs/ServerPickerDialog.tsx

@@ -205,13 +205,14 @@ export default class ServerPickerDialog extends React.PureComponent<IProps, ISta
                     className="mx_ServerPickerDialog_otherHomeserverRadio"
                     checked={!this.state.defaultChosen}
                     onChange={this.onOtherChosen}
+                    childrenInLabel={false}
                 >
                     <Field
                         type="text"
                         className="mx_ServerPickerDialog_otherHomeserver"
                         label={_t("Other homeserver")}
                         onChange={this.onHomeserverChange}
-                        onClick={this.onOtherChosen}
+                        onFocus={this.onOtherChosen}
                         ref={this.fieldRef}
                         onValidate={this.onHomeserverValidate}
                         value={this.state.otherHomeserver}

src/components/views/elements/StyledRadioButton.tsx

@@ -20,6 +20,10 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
     outlined?: boolean;
+    // If true (default), the children will be contained within a <label> element
+    // If false, they'll be in a div. Putting interactive components that have labels
+    // themselves in labels can cause strange bugs like https://github.com/vector-im/element-web/issues/18031
+    childrenInLabel?: boolean;
 }
 
 interface IState {
@@ -29,10 +33,11 @@ interface IState {
 export default class StyledRadioButton extends React.PureComponent<IProps, IState> {
     public static readonly defaultProps = {
         className: '',
+        childrenInLabel: true,
     };
 
     public render() {
-        const { children, className, disabled, outlined, ...otherProps } = this.props;
+        const { children, className, disabled, outlined, childrenInLabel, ...otherProps } = this.props;
         const _className = classnames(
             'mx_RadioButton',
             className,
@@ -42,12 +47,27 @@ export default class StyledRadioButton extends React.PureComponent<IProps, IStat
                 "mx_RadioButton_checked": this.props.checked,
                 "mx_RadioButton_outlined": outlined,
             });
-        return <label className={_className}>
+
+        const radioButton = <React.Fragment>
             <input type='radio' disabled={disabled} {...otherProps} />
             {/* Used to render the radio button circle */}
             <div><div /></div>
-            <div className="mx_RadioButton_content">{children}</div>
-            <div className="mx_RadioButton_spacer" />
-        </label>;
+        </React.Fragment>;
+
+        if (childrenInLabel) {
+            return <label className={_className}>
+                {radioButton}
+                <div className="mx_RadioButton_content">{children}</div>
+                <div className="mx_RadioButton_spacer" />
+            </label>;
+        } else {
+            return <div className={_className}>
+                <label className="mx_RadioButton_innerLabel">
+                    {radioButton}
+                </label>
+                <div className="mx_RadioButton_content">{children}</div>
+                <div className="mx_RadioButton_spacer" />
+            </div>;
+        }
     }
 }