mirror of https://github.com/vector-im/riot-web
Improve form handling in and around space creation
parent
25fb243d0b
commit
cc40df298b
|
@ -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"
|
||||||
/>;
|
/>;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue