I have a react component where you can paste screenshots from the clipboard. The implementation is like I have a div which is focusable using tabIndex. When user focuses on it and paste copied image it is shown in the DOM. The issue is this component works fine in all the places except in the place where it is put inside modal. The package I am using is "sweetalert2-react-content".
Below is the code
<div
tabIndex={0}
onPaste={onPaste}
className="relative h-full border border-dashed border-primary cursor-pointer"
>
<div
className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center"
>
<span className="">Paste here or drag and drop the image.</span>
<p className="text-center">Or</p>
<label
className={`${
isNew || isEditable
? 'cursor-pointer bg-[#FFFFFF]'
: 'text-[#B1ACA8]'
} general-form-input w-fit flex !py-1`}
>
<p
className="text-left bg-gray-100 px-4 flex items-center max-w-[200px] "
htmlFor={attr[ENTITY_ATTRIBUTES.attributeName]}
>
<span className="truncate">
{typeof value != 'string' && value
? value.name
: 'Select a file'}
</span>
</p>
<input
id={attr[ENTITY_ATTRIBUTES.attributeName]}
type={'file'}
accept="image/*"
disabled={
isDisabled(attr) ||
attr[ENTITY_ATTRIBUTES.isReadOnly] == true
}
className="hidden file-form-input"
onChange={(e) => {
if (
Array.from(e.target.files).every(
(file) => file.type.split('/')[0] == 'image'
)
) {
onFileSelect(e.target.files[0], onChange);
}
}}
/>
{value instanceof Object ? (
<button
onClick={(e) => {
onChange(null);
e.stopPropagation();
e.preventDefault();
}}
className="hover:bg-red-200 hover:text-red-600 h-full px-2 font-extrabold"
>
<MdClose className="mx-auto " />
</button>
) : (
<AiOutlineFileAdd className="w-6 h-full" />
)}
</label>
</div>
</div>
I dug inside the issue and found out that the onPaste event is not getting triggered for the div inside sweetalert modal only. Everywhere else it gets triggered and works fine.
