Skip to content

Commit

Permalink
Merge pull request #175 from element-hq/dbkr/editinplace_submit_on_enter
Browse files Browse the repository at this point in the history 
Make EditInPlace submit on enter
  • Loading branch information
@dbkr
dbkr authored Jun 4, 2024
2 parents 2a3f3bc + 290a109 commit 3ea9b03
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 146 deletions.
11 changes: 11 additions & 0 deletions src/components/Form/Controls/EditInPlace/EditInPlace.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,17 @@ describe("EditInPlace", () => {
expect(onSave).toHaveBeenCalled();
});

it("calls save callback if enter pressed in the text box", async () => {
const onSave = vi.fn();
render(<EditInPlaceTest onSave={onSave} value="Changed" />);

await act(async () => {
await userEvent.type(screen.getByRole("textbox"), "{enter}");
});

expect(onSave).toHaveBeenCalled();
});

it("calls onCancel when cancel button pressed", async () => {
const onCancel = vi.fn();
render(<EditInPlaceTest onCancel={onCancel} value="Changed" />);
Expand Down
45 changes: 26 additions & 19 deletions src/components/Form/Controls/EditInPlace/EditInPlace.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ limitations under the License.
*/

import classnames from "classnames";
import React, { forwardRef, useCallback, useRef } from "react";
import React, { FormEvent, forwardRef, useCallback, useRef } from "react";
import styles from "./EditInPlace.module.css";
import { TextInput } from "../Text";
import useId from "../../../../utils/useId";
Expand Down Expand Up @@ -80,7 +80,9 @@ type Props = {
} & React.ComponentProps<typeof TextInput>;

/**
* A text box with save/cancel buttons that appear when the field is active
* A text box with save/cancel buttons that appear when the field is active.
* Since thios control has its own 'save' button, it should *not* appear as part
* of a larger form: it exists as its own form that submits separately.
*/
export const EditInPlace = forwardRef<HTMLInputElement, Props>(
function EditInPlace(
Expand Down Expand Up @@ -118,28 +120,32 @@ export const EditInPlace = forwardRef<HTMLInputElement, Props>(
};
}, []);

const onSaveButonClicked = useCallback(async () => {
try {
await onSave();
saveButtonRef.current?.blur();
setShowSaved(true);
hideTimer.current = setTimeout(() => {
setShowSaved(false);
}, 2000);
} catch (e) {
// We don't really need to do anything here, we just don't want to display the
// 'saved' label, obviously. The user of the component can update the error to
// show what failed.
}
}, [setShowSaved, onSave, hideTimer]);
const onFormSubmit = useCallback(
async (e: FormEvent) => {
e.preventDefault();
try {
await onSave();
saveButtonRef.current?.blur();
setShowSaved(true);
hideTimer.current = setTimeout(() => {
setShowSaved(false);
}, 2000);
} catch (e) {
// We don't really need to do anything here, we just don't want to display the
// 'saved' label, obviously. The user of the component can update the error to
// show what failed.
}
},
[setShowSaved, onSave, hideTimer],
);

const onCancelButtonClicked = useCallback(() => {
cancelButtonRef.current?.blur();
onCancel();
}, [cancelButtonRef, onCancel]);

return (
<div className={classes} id={id}>
<form className={classes} id={id} onSubmit={onFormSubmit}>
<div className={styles.label} id={labelId}>
{label}
</div>
Expand All @@ -154,18 +160,19 @@ export const EditInPlace = forwardRef<HTMLInputElement, Props>(
/>
<div className={styles["button-group"]}>
<button
type="submit"
className={classnames(styles.button, styles["primary-button"], {
[styles["primary-button-disabled"]]: disableSaveButton,
})}
ref={saveButtonRef}
onClick={onSaveButonClicked}
aria-controls={id}
aria-label={saveButtonLabel}
disabled={disableSaveButton}
>
<CheckIcon />
</button>
<button
type="button"
role="button"
ref={cancelButtonRef}
className={styles.button}
Expand Down Expand Up @@ -216,7 +223,7 @@ export const EditInPlace = forwardRef<HTMLInputElement, Props>(
</span>
</div>
)}
</div>
</form>
);
},
);
177 changes: 50 additions & 127 deletions src/components/Form/Controls/EditInPlace/__snapshots__/EditInPlace.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,142 +5,65 @@ exports[`EditInPlace > renders 1`] = `
<form>
<div>
<div
class="_container_980156"
id=":r1:"
class="_label_980156"
id=":r2:"
>
<div
class="_label_980156"
id=":r2:"
>
Edit Me
</div>
<div
class="_controls_980156"
>
<input
aria-invalid="false"
aria-labelledby=":r2:"
class="_control_a839aa _control_980156"
id="radix-:r0:"
name="editInPlace"
title=""
value="Edit this text"
/>
<div
class="_button-group_980156"
>
<button
aria-controls=":r1:"
aria-label="Save"
class="_button_980156 _primary-button_980156"
>
<svg
class="cpd-icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55 17.575c-.133 0-.258-.02-.375-.063a.878.878 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.712-.275s.53.092.713.275c.183.183.275.42.275.712s-.092.53-.275.713l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
/>
</svg>
</button>
<button
aria-controls=":r1:"
aria-label="Cancel"
class="_button_980156"
role="button"
>
<svg
class="cpd-icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/>
</svg>
</button>
</div>
</div>
Edit Me
</div>
</div>
</form>
</DocumentFragment>
`;

exports[`PasswordControl > renders 1`] = `
<DocumentFragment>
<form>
<div>
<div
class="_container_980156"
id=":r1:"
class="_controls_980156"
>
<input
aria-invalid="false"
aria-labelledby=":r2:"
class="_control_a839aa _control_980156"
id="radix-:r0:"
name="editInPlace"
title=""
value="Edit this text"
/>
<div
class="_label_980156"
id=":r2:"
class="_button-group_980156"
>
Edit Me
</div>
<div
class="_controls_980156"
>
<input
aria-invalid="false"
class="_control_a839aa _control_980156"
id="radix-:r0:"
label="Edit Me"
name="editInPlace"
title=""
value="Edit this text"
/>
<div
class="_button-group_980156"
<button
aria-controls=":r1:"
aria-label="Save"
class="_button_980156 _primary-button_980156"
type="submit"
>
<button
aria-controls=":r1:"
aria-label="Save"
class="_button_980156 _primary-button_980156"
<svg
class="cpd-icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<svg
class="cpd-icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55 17.575c-.133 0-.258-.02-.375-.063a.878.878 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.712-.275s.53.092.713.275c.183.183.275.42.275.712s-.092.53-.275.713l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
/>
</svg>
</button>
<button
aria-controls=":r1:"
aria-label="Cancel"
class="_button_980156"
role="button"
<path
d="M9.55 17.575c-.133 0-.258-.02-.375-.063a.878.878 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.712-.275s.53.092.713.275c.183.183.275.42.275.712s-.092.53-.275.713l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
/>
</svg>
</button>
<button
aria-controls=":r1:"
aria-label="Cancel"
class="_button_980156"
role="button"
type="button"
>
<svg
class="cpd-icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<svg
class="cpd-icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/>
</svg>
</button>
</div>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/>
</svg>
</button>
</div>
</div>
</div>
Expand Down

0 comments on commit 3ea9b03

Please sign in to comment.