fixed: x button overlap (#9198)

pull/8946/head^2
VasuDevrani 2023-05-30 19:43:17 +05:30 committed by GitHub
parent e37e07ab3b
commit 35144e6f47
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 18 deletions

View File

@ -185,33 +185,12 @@ export const FormBuilder = function FormBuilder({
}, },
]); ]);
} }
const crossButton = (index: number) => {
return ( return (
<div className={className}>
<Label>{label}</Label>
<div className="bg-muted rounded-md p-4">
<ul ref={animationRef}>
{value?.map((option, index) => (
<li key={index}>
<div className="flex items-center">
<Input
required
value={option.label}
onChange={(e) => {
// Right now we use label of the option as the value of the option. It allows us to not separately lookup the optionId to know the optionValue
// It has the same drawback that if the label is changed, the value of the option will change. It is not a big deal for now.
value.splice(index, 1, {
label: e.target.value,
value: e.target.value.trim(),
});
onChange(value);
}}
readOnly={readOnly}
placeholder={`Enter Option ${index + 1}`}
/>
{value.length > 2 && !readOnly && (
<Button <Button
type="button" type="button"
className="mb-2 -ml-8 hover:!bg-transparent focus:!bg-transparent focus:!outline-none focus:!ring-0" className="ml-3 p-0 hover:!bg-transparent focus:!bg-transparent focus:!outline-none focus:!ring-0"
size="sm" size="sm"
color="minimal" color="minimal"
StartIcon={X} StartIcon={X}
@ -224,7 +203,34 @@ export const FormBuilder = function FormBuilder({
onChange(newOptions); onChange(newOptions);
}} }}
/> />
)} );
};
return (
<div className={className}>
<Label>{label}</Label>
<div className="bg-muted rounded-md p-4">
<ul ref={animationRef}>
{value?.map((option, index) => (
<li key={index}>
<div className="flex items-center">
<InputField
required
value={option.label}
onChange={(e) => {
// Right now we use label of the option as the value of the option. It allows us to not separately lookup the optionId to know the optionValue
// It has the same drawback that if the label is changed, the value of the option will change. It is not a big deal for now.
value.splice(index, 1, {
label: e.target.value,
value: e.target.value.trim(),
});
onChange(value);
}}
addOnSuffix={value.length > 2 && !readOnly && crossButton(index)}
readOnly={readOnly}
placeholder={`Enter Option ${index + 1}`}
containerClassName="w-full"
/>
</div> </div>
</li> </li>
))} ))}