PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Switch to using forms for implicit submission

Browse source
This commit is contained in:
Michael Telatynski 2021-05-11 10:01:40 +01:00
parent 5eed9f6cba
commit de04d82395
2 changed files with 36 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
res/css/structures/_SpaceRoomView.scss
View file

@ -103,6 +103,10 @@ $SpaceRoomViewInnerWidth: 428px;
padding: 8px 22px; padding: 8px 22px;
margin-left: 16px; margin-left: 16px;
} }
input.mx_AccessibleButton {
border: none; // override default styles
}
} }
.mx_Field { .mx_Field {

52
src/components/structures/SpaceRoomView.tsx
View file

@ -368,7 +368,6 @@ const SpaceLanding = ({ space }) => {
const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => { const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
const [busy, setBusy] = useState(false); const [busy, setBusy] = useState(false);
const [error, setError] = useState(""); const [error, setError] = useState("");
let onClick = onFinished;
const numFields = 3; const numFields = 3;
const placeholders = [_t("General"), _t("Random"), _t("Support")]; const placeholders = [_t("General"), _t("Random"), _t("Support")];
// TODO vary default prefills for "Just Me" spaces // TODO vary default prefills for "Just Me" spaces
@ -384,16 +383,11 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
value={roomNames[i]} value={roomNames[i]}
onChange={ev => setRoomName(i, ev.target.value)} onChange={ev => setRoomName(i, ev.target.value)}
autoFocus={i === 2} autoFocus={i === 2}
onKeyDown={ev => {
if (ev.key === Key.ENTER) {
ev.preventDefault();
onClick();
}
}}
/>; />;
}); });
const onNextClick = async () => { const onNextClick = async (ev) => {
ev.preventDefault();
if (busy) return; if (busy) return;
setError(""); setError("");
setBusy(true); setBusy(true);
@ -419,6 +413,10 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
setBusy(false); setBusy(false);
}; };
let onClick = (ev) => {
ev.preventDefault();
onFinished();
};
let buttonLabel = _t("Skip for now"); let buttonLabel = _t("Skip for now");
if (roomNames.some(name => name.trim())) { if (roomNames.some(name => name.trim())) {
onClick = onNextClick; onClick = onNextClick;
@ -430,16 +428,20 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
<div className="mx_SpaceRoomView_description">{ description }</div> <div className="mx_SpaceRoomView_description">{ description }</div>
{ error && <div className="mx_SpaceRoomView_errorText">{ error }</div> } { error && <div className="mx_SpaceRoomView_errorText">{ error }</div> }
<form onSubmit={onClick} id="mx_SpaceSetupFirstRooms">
{ fields } { fields }
</form>
<div className="mx_SpaceRoomView_buttons"> <div className="mx_SpaceRoomView_buttons">
<AccessibleButton <AccessibleButton
kind="primary" kind="primary"
disabled={busy} disabled={busy}
onClick={onClick} onClick={onClick}
> element="input"
{ buttonLabel } type="submit"
</AccessibleButton> form="mx_SpaceSetupFirstRooms"
value={buttonLabel}
/>
</div> </div>
</div>; </div>;
}; };
@ -564,7 +566,6 @@ const validateEmailRules = withValidation({
const SpaceSetupPrivateInvite = ({ space, onFinished }) => { const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
const [busy, setBusy] = useState(false); const [busy, setBusy] = useState(false);
const [error, setError] = useState(""); const [error, setError] = useState("");
let onClick = onFinished;
const numFields = 3; const numFields = 3;
const fieldRefs: RefObject<Field>[] = [useRef(), useRef(), useRef()]; const fieldRefs: RefObject<Field>[] = [useRef(), useRef(), useRef()];
const [emailAddresses, setEmailAddress] = useStateArray(numFields, ""); const [emailAddresses, setEmailAddress] = useStateArray(numFields, "");
@ -581,16 +582,11 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
ref={fieldRefs[i]} ref={fieldRefs[i]}
onValidate={validateEmailRules} onValidate={validateEmailRules}
autoFocus={i === 0} autoFocus={i === 0}
onKeyDown={ev => {
if (ev.key === Key.ENTER) {
ev.preventDefault();
onClick();
}
}}
/>; />;
}); });
const onNextClick = async () => { const onNextClick = async (ev) => {
ev.preventDefault();
if (busy) return; if (busy) return;
setError(""); setError("");
for (let i = 0; i < fieldRefs.length; i++) { for (let i = 0; i < fieldRefs.length; i++) {
@ -625,6 +621,10 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
setBusy(false); setBusy(false);
}; };
let onClick = (ev) => {
ev.preventDefault();
onFinished();
};
let buttonLabel = _t("Skip for now"); let buttonLabel = _t("Skip for now");
if (emailAddresses.some(name => name.trim())) { if (emailAddresses.some(name => name.trim())) {
onClick = onNextClick; onClick = onNextClick;
@ -638,7 +638,9 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
</div> </div>
{ error && <div className="mx_SpaceRoomView_errorText">{ error }</div> } { error && <div className="mx_SpaceRoomView_errorText">{ error }</div> }
<form onSubmit={onClick} id="mx_SpaceSetupPrivateInvite">
{ fields } { fields }
</form>
<div className="mx_SpaceRoomView_inviteTeammates_buttons"> <div className="mx_SpaceRoomView_inviteTeammates_buttons">
<AccessibleButton <AccessibleButton
@ -650,9 +652,15 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
</div> </div>
<div className="mx_SpaceRoomView_buttons"> <div className="mx_SpaceRoomView_buttons">
<AccessibleButton kind="primary" disabled={busy} onClick={onClick}> <AccessibleButton
{ buttonLabel } kind="primary"
</AccessibleButton> disabled={busy}
onClick={onClick}
element="input"
type="submit"
form="mx_SpaceSetupPrivateInvite"
value={buttonLabel}
/>
</div> </div>
</div>; </div>;
}; };