fix: inconsistency for create label, select label getting closed on select (#1085)

This commit is contained in:
Dakshesh Jain
2023-05-19 19:12:24 +05:30
committed by GitHub
parent 406f02737f
commit ddeafc0695
3 changed files with 46 additions and 55 deletions

View File

@@ -30,7 +30,7 @@ type Props = {
const defaultValues: Partial<IState> = {
name: "",
color: "#000000",
color: "#858E96",
};
export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClose }) => {
@@ -44,7 +44,6 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
watch,
control,
reset,
setError,
} = useForm<IIssueLabels>({
defaultValues,
});
@@ -109,13 +108,13 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
{({ open, close }) => (
<>
<Popover.Button
className={`group inline-flex items-center rounded-sm bg-brand-surface-2 text-base font-medium hover:text-brand-base focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
className={`group inline-flex items-center rounded-sm py-2 text-base font-medium hover:text-brand-base focus:outline-none ${
open ? "text-brand-base" : "text-brand-secondary"
}`}
>
{watch("color") && watch("color") !== "" && (
<span
className="ml-2 h-4 w-4 rounded"
className="ml-2 h-5 w-5 rounded"
style={{
backgroundColor: watch("color") ?? "black",
}}
@@ -161,7 +160,7 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
type="text"
id="name"
name="name"
placeholder="Enter name"
placeholder="Label title"
autoComplete="off"
error={errors.name}
register={register}

View File

@@ -14,6 +14,8 @@ import { Popover, Transition } from "@headlessui/react";
import issuesService from "services/issues.service";
// ui
import { Input, PrimaryButton, SecondaryButton } from "components/ui";
// icons
import { ChevronDownIcon } from "@heroicons/react/24/outline";
// types
import { IIssueLabels } from "types";
// fetch-keys
@@ -28,7 +30,7 @@ type Props = {
const defaultValues: Partial<IIssueLabels> = {
name: "",
color: "#ff0000",
color: "#858E96",
};
type Ref = HTMLDivElement;
@@ -113,7 +115,7 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
}`}
ref={ref}
>
<div className="h-8 w-8 flex-shrink-0">
<div className="flex-shrink-0">
<Popover className="relative z-10 flex h-full w-full items-center justify-center">
{({ open }) => (
<>
@@ -128,6 +130,12 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
backgroundColor: watch("color"),
}}
/>
<ChevronDownIcon
className={`ml-2 h-5 w-5 group-hover:text-brand-secondary ${
open ? "text-gray-600" : "text-gray-400"
}`}
aria-hidden="true"
/>
</Popover.Button>
<Transition
@@ -153,7 +161,7 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
)}
</Popover>
</div>
<div className="flex w-full flex-col justify-center">
<div className="flex flex-1 flex-col justify-center">
<Input
type="text"
id="labelName"