From cc40df298b5a4a96839cc349de450313a016e992 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 3 Sep 2021 13:34:09 +0100 Subject: [PATCH] Improve form handling in and around space creation --- src/components/structures/SpaceRoomView.tsx | 1 + src/components/views/elements/RoomAliasField.tsx | 5 ++++- src/components/views/spaces/SpaceCreateMenu.tsx | 12 +++++++++++- 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx index 767d6632aa..c07ef6fa2c 100644 --- a/src/components/structures/SpaceRoomView.tsx +++ b/src/components/structures/SpaceRoomView.tsx @@ -496,6 +496,7 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => { onChange={ev => setRoomName(i, ev.target.value)} autoFocus={i === 2} disabled={busy} + autoComplete="off" />; }); diff --git a/src/components/views/elements/RoomAliasField.tsx b/src/components/views/elements/RoomAliasField.tsx index a7676e4214..9c383989b1 100644 --- a/src/components/views/elements/RoomAliasField.tsx +++ b/src/components/views/elements/RoomAliasField.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { createRef } from "react"; +import React, { createRef, KeyboardEventHandler } from "react"; import { _t } from '../../../languageHandler'; import withValidation from './Validation'; @@ -28,6 +28,7 @@ interface IProps { label?: string; placeholder?: string; disabled?: boolean; + onKeyDown?: KeyboardEventHandler; onChange?(value: string): void; } @@ -70,6 +71,8 @@ export default class RoomAliasField extends React.PureComponent value={this.props.value.substring(1, this.props.value.length - this.props.domain.length - 1)} maxLength={maxlength} disabled={this.props.disabled} + autoComplete="off" + onKeyDown={this.props.onKeyDown} /> ); } diff --git a/src/components/views/spaces/SpaceCreateMenu.tsx b/src/components/views/spaces/SpaceCreateMenu.tsx index 33e4a990ef..1762b3a964 100644 --- a/src/components/views/spaces/SpaceCreateMenu.tsx +++ b/src/components/views/spaces/SpaceCreateMenu.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and 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 { RoomType } from "matrix-js-sdk/src/@types/event"; import FocusLock from "react-focus-lock"; @@ -38,6 +38,7 @@ import SettingsStore from "../../../settings/SettingsStore"; import defaultDispatcher from "../../../dispatcher/dispatcher"; import { Action } from "../../../dispatcher/actions"; import { UserTab } from "../dialogs/UserSettingsDialog"; +import { Key } from "../../../Keyboard"; export const createSpace = async ( name: string, @@ -159,6 +160,12 @@ export const SpaceCreateForm: React.FC = ({ const cli = useContext(MatrixClientContext); const domain = cli.getDomain(); + const onKeyDown = (ev: KeyboardEvent) => { + if (ev.key === Key.ENTER) { + onSubmit(ev); + } + }; + return
@@ -174,9 +181,11 @@ export const SpaceCreateForm: React.FC = ({ } setName(newName); }} + onKeyDown={onKeyDown} ref={nameFieldRef} onValidate={spaceNameValidator} disabled={busy} + autoComplete="off" /> { showAliasField @@ -188,6 +197,7 @@ export const SpaceCreateForm: React.FC = ({ placeholder={name ? nameToAlias(name, domain) : _t("e.g. my-space")} label={_t("Address")} disabled={busy} + onKeyDown={onKeyDown} /> : null }