fix: Prevent button activation during post-upload state synchronization

Fix the Choose File button remaining clickable during the brief window between upload completion and pattern info retrieval. The issue was that labels don't support the disabled attribute, so when using asChild with a label, the disabled state was ignored.

Changes:
- Only use asChild when button is enabled (labels can't be disabled)
- Keep input and button disabled conditions synchronized
- Add uploadProgress check to prevent re-enabling before patternUploaded is true

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Jan-Henrik Bruhn 2025-12-22 11:52:18 +01:00
parent b995eb898e
commit 6e38ba855c

View file

@ -256,16 +256,34 @@ export function FileUpload() {
onChange={handleFileChange}
id="file-input"
className="hidden"
disabled={isLoading || patternUploaded || isUploading}
disabled={
isLoading ||
patternUploaded ||
isUploading ||
(uploadProgress > 0 && !patternUploaded)
}
/>
<Button
asChild={!fileService.hasNativeDialogs()}
asChild={
!fileService.hasNativeDialogs() &&
!(
isLoading ||
patternUploaded ||
isUploading ||
(uploadProgress > 0 && !patternUploaded)
)
}
onClick={
fileService.hasNativeDialogs()
? () => handleFileChange()
: undefined
}
disabled={isLoading || patternUploaded || isUploading}
disabled={
isLoading ||
patternUploaded ||
isUploading ||
(uploadProgress > 0 && !patternUploaded)
}
variant="outline"
className="flex-[2]"
>
@ -289,7 +307,7 @@ export function FileUpload() {
)}
</>
) : (
<label htmlFor="file-input" className="flex items-center gap-2">
<label htmlFor="file-input" className="flex items-center gap-2 cursor-pointer">
{isLoading ? (
<>
<Loader2 className="w-3.5 h-3.5 animate-spin" />