Improve form handling in and around space creation

pull/21833/head
Michael Telatynski 2021-09-03 13:34:09 +01:00
parent 25fb243d0b
commit cc40df298b
3 changed files with 16 additions and 2 deletions

View File

@ -496,6 +496,7 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
onChange={ev => setRoomName(i, ev.target.value)} onChange={ev => setRoomName(i, ev.target.value)}
autoFocus={i === 2} autoFocus={i === 2}
disabled={busy} disabled={busy}
autoComplete="off"
/>; />;
}); });

View File

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { createRef } from "react"; import React, { createRef, KeyboardEventHandler } from "react";
import { _t } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
import withValidation from './Validation'; import withValidation from './Validation';
@ -28,6 +28,7 @@ interface IProps {
label?: string; label?: string;
placeholder?: string; placeholder?: string;
disabled?: boolean; disabled?: boolean;
onKeyDown?: KeyboardEventHandler;
onChange?(value: string): void; onChange?(value: string): void;
} }
@ -70,6 +71,8 @@ export default class RoomAliasField extends React.PureComponent<IProps, IState>
value={this.props.value.substring(1, this.props.value.length - this.props.domain.length - 1)} value={this.props.value.substring(1, this.props.value.length - this.props.domain.length - 1)}
maxLength={maxlength} maxLength={maxlength}
disabled={this.props.disabled} disabled={this.props.disabled}
autoComplete="off"
onKeyDown={this.props.onKeyDown}
/> />
); );
} }

View File

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { ComponentProps, RefObject, SyntheticEvent, useContext, useRef, useState } from "react"; import React, { ComponentProps, RefObject, SyntheticEvent, KeyboardEvent, useContext, useRef, useState } from "react";
import classNames from "classnames"; import classNames from "classnames";
import { RoomType } from "matrix-js-sdk/src/@types/event"; import { RoomType } from "matrix-js-sdk/src/@types/event";
import FocusLock from "react-focus-lock"; import FocusLock from "react-focus-lock";
@ -38,6 +38,7 @@ import SettingsStore from "../../../settings/SettingsStore";
import defaultDispatcher from "../../../dispatcher/dispatcher"; import defaultDispatcher from "../../../dispatcher/dispatcher";
import { Action } from "../../../dispatcher/actions"; import { Action } from "../../../dispatcher/actions";
import { UserTab } from "../dialogs/UserSettingsDialog"; import { UserTab } from "../dialogs/UserSettingsDialog";
import { Key } from "../../../Keyboard";
export const createSpace = async ( export const createSpace = async (
name: string, name: string,
@ -159,6 +160,12 @@ export const SpaceCreateForm: React.FC<ISpaceCreateFormProps> = ({
const cli = useContext(MatrixClientContext); const cli = useContext(MatrixClientContext);
const domain = cli.getDomain(); const domain = cli.getDomain();
const onKeyDown = (ev: KeyboardEvent) => {
if (ev.key === Key.ENTER) {
onSubmit(ev);
}
};
return <form className="mx_SpaceBasicSettings" onSubmit={onSubmit}> return <form className="mx_SpaceBasicSettings" onSubmit={onSubmit}>
<SpaceAvatar avatarUrl={avatarUrl} setAvatar={setAvatar} avatarDisabled={busy} /> <SpaceAvatar avatarUrl={avatarUrl} setAvatar={setAvatar} avatarDisabled={busy} />
@ -174,9 +181,11 @@ export const SpaceCreateForm: React.FC<ISpaceCreateFormProps> = ({
} }
setName(newName); setName(newName);
}} }}
onKeyDown={onKeyDown}
ref={nameFieldRef} ref={nameFieldRef}
onValidate={spaceNameValidator} onValidate={spaceNameValidator}
disabled={busy} disabled={busy}
autoComplete="off"
/> />
{ showAliasField { showAliasField
@ -188,6 +197,7 @@ export const SpaceCreateForm: React.FC<ISpaceCreateFormProps> = ({
placeholder={name ? nameToAlias(name, domain) : _t("e.g. my-space")} placeholder={name ? nameToAlias(name, domain) : _t("e.g. my-space")}
label={_t("Address")} label={_t("Address")}
disabled={busy} disabled={busy}
onKeyDown={onKeyDown}
/> />
: null : null
} }