37d2ebccf7
* fix: add type="button" to modal close buttons to fix Enter key form submission Previously, pressing Enter in modal form inputs would dismiss the modal instead of submitting the form because close buttons defaulted to type="submit". This adds explicit type="button" to all modal close buttons to ensure Enter key properly submits forms. Fixes: - New board creation via Enter key - New workspace creation via Enter key - New card creation via Enter key - New list creation via Enter key - Member invitation via Enter key - Label creation/editing via Enter key - Board URL updates via Enter key - Import boards forms via Enter key * fix: submit forms on enter key submission --------- Co-authored-by: Henry <henry_ball@hotmail.co.uk>
86 lines
2.6 KiB
TypeScript
86 lines
2.6 KiB
TypeScript
import ContentEditable from "react-contenteditable";
|
|
import { useForm } from "react-hook-form";
|
|
import { HiOutlineArrowUp } from "react-icons/hi2";
|
|
|
|
import LoadingSpinner from "~/components/LoadingSpinner";
|
|
import { usePopup } from "~/providers/popup";
|
|
import { api } from "~/utils/api";
|
|
|
|
interface FormValues {
|
|
comment: string;
|
|
}
|
|
|
|
const NewCommentForm = ({ cardPublicId }: { cardPublicId: string }) => {
|
|
const utils = api.useUtils();
|
|
const { showPopup } = usePopup();
|
|
const { handleSubmit, setValue, watch, reset } = useForm<FormValues>({
|
|
values: {
|
|
comment: "",
|
|
},
|
|
});
|
|
|
|
const queryParams = {
|
|
cardPublicId,
|
|
};
|
|
|
|
const addCommentMutation = api.card.addComment.useMutation({
|
|
onError: (_error, _newList) => {
|
|
showPopup({
|
|
header: "Unable to add comment",
|
|
message: "Please try again later, or contact customer support.",
|
|
icon: "error",
|
|
});
|
|
},
|
|
onSettled: async () => {
|
|
reset();
|
|
await utils.card.byId.invalidate(queryParams);
|
|
},
|
|
onSuccess: async () => {
|
|
await utils.card.byId.refetch();
|
|
},
|
|
});
|
|
|
|
const onSubmit = (data: FormValues) => {
|
|
addCommentMutation.mutate({
|
|
cardPublicId,
|
|
comment: data.comment,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<form
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
className="flex w-full max-w-[1000px] flex-col rounded-xl border border-light-600 bg-light-200 p-4 text-light-900 focus-visible:outline-none dark:border-dark-400 dark:bg-dark-100 dark:text-dark-1000 sm:text-sm sm:leading-6"
|
|
>
|
|
<ContentEditable
|
|
placeholder="Add a comment..."
|
|
html={watch("comment")}
|
|
disabled={false}
|
|
onChange={(e) => setValue("comment", e.target.value)}
|
|
className="block w-full border-0 bg-transparent py-1.5 text-light-900 focus-visible:outline-none dark:text-dark-1000 sm:text-sm sm:leading-6"
|
|
onKeyDown={async (e) => {
|
|
if (e.key === "Enter" && e.shiftKey) {
|
|
e.preventDefault();
|
|
await handleSubmit(onSubmit)();
|
|
}
|
|
}}
|
|
/>
|
|
<div className="flex justify-end">
|
|
<button
|
|
type="submit"
|
|
disabled={addCommentMutation.isPending}
|
|
className="flex h-8 w-8 items-center justify-center rounded-full border border-light-600 bg-light-300 hover:bg-light-400 disabled:opacity-50 dark:border-dark-400 dark:bg-dark-200 dark:hover:bg-dark-400"
|
|
>
|
|
{addCommentMutation.isPending ? (
|
|
<LoadingSpinner size="sm" />
|
|
) : (
|
|
<HiOutlineArrowUp />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default NewCommentForm;
|