fix: Input variant refactor

[raunakab]

Description

Address final remaining comment which was accidentally ignored prior to merge in the previous PR (#7575).

Additional Options

• [Optional] Override Linear Check

[cubic-dev-ai]

No issues found across 1 file

[greptile-apps]

Greptile Summary

Completed the readOnly variant handling in InputFile component by adding paste protection and properly propagating the readOnly state to the underlying InputTypeIn component.

• Added isReadOnly check derived from variant === "readOnly"
• Introduced isNonEditable variable combining isDisabled || isReadOnly for consistent behavior
• Protected handlePaste() function from allowing paste when component is non-editable
• Updated readOnly prop passed to InputTypeIn to include isReadOnly state: readOnly={isFileMode || isReadOnly}
• Updated comment to reflect handling of both disabled and readOnly states

This change ensures that when variant="readOnly", the component is truly non-editable: file picking, paste operations, and direct input are all blocked, matching the visual appearance and user expectations.

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• Clean, focused refactor that completes the readOnly variant handling. The changes are logically sound, maintain consistency with existing patterns, and properly guard all interaction points (file picking, paste, and input). No breaking changes or edge cases identified.
• No files require special attention

Important Files Changed

Filename	Overview
web/src/refresh-components/inputs/InputFile.tsx	Enhanced readOnly variant handling by adding paste protection and proper readOnly propagation to InputTypeIn component

Sequence Diagram

sequenceDiagram
    participant User
    participant InputFile
    participant InputTypeIn
    participant FileReader

    Note over InputFile: variant="readOnly" or "disabled"
    InputFile->>InputFile: isReadOnly = variant === "readOnly"
    InputFile->>InputFile: isDisabled = disabled || variant === "disabled"
    InputFile->>InputFile: isNonEditable = isDisabled || isReadOnly

    User->>InputFile: Click file picker button
    InputFile->>InputFile: openFilePicker() checks isNonEditable
    alt isNonEditable
        InputFile-->>User: Action blocked
    else editable
        InputFile->>FileReader: Open file picker
        FileReader-->>InputFile: File selected
        InputFile->>InputFile: setValue(content)
    end

    User->>InputTypeIn: Paste text
    InputTypeIn->>InputFile: handlePaste()
    InputFile->>InputFile: Check isNonEditable
    alt isNonEditable
        InputFile-->>User: Paste blocked
    else editable
        InputFile->>InputFile: setValue(pastedText)
        InputFile->>InputFile: setIsFileMode(false)
    end

    Note over InputFile,InputTypeIn: readOnly prop = isFileMode || isReadOnly
    InputFile->>InputTypeIn: Pass readOnly prop
    InputTypeIn->>InputTypeIn: Render with readOnly state

Loading