fix: apply ID to debounceinput even when it is a var.

[abulvenz]

All Submissions:

• Bug fix (non-breaking change which fixes an issue)

When using value and on_change and an rx.Var as input.id prop, it will not be correctly set on the input, because debounce input only copies IDs that are not vars.

We had some problems with IDs before. Maybe it's about time for #3564

Minimal example with working and not working input. Interestingly the var in evaluated in both cases.

import reflex as rx
class State(rx.State):
    val: str = ""

    @rx.event
    def on_change(val):
        return val

def index() -> rx.Component:
    return rx.container(
        rx.input(
            value=State.val, on_change=State.on_change,
            id=rx.Var.create("broken"),
        ),
        rx.input(
            value=State.val, on_change=State.on_change,
            id=f"{rx.Var.create('works')}",
        ),
    )

app = rx.App()
app.add_page(index)

[codspeed-hq]

Merging this PR will not alter performance

✅ 8 untouched benchmarks

---

_{Comparing abulvenz:fix-debounce-input-id (6e4ee74) with main (b459a7c)}

[greptile-apps]

Greptile Overview

Greptile Summary

Fixed a bug where DebounceInput failed to copy the id prop from child components when the ID was a Var instance. The issue was caused by incorrect indentation that made the ID copy conditional on the existence of a child ref. The fix adds a proper null check (if child.id is not None) before copying the ID, ensuring IDs are preserved regardless of whether they are string literals or Var objects.

Confidence Score: 5/5

• This PR is safe to merge with minimal risk - it's a simple indentation fix that resolves a clear bug
• The change adds a single line to fix incorrect indentation that was causing IDs to be skipped. The fix is minimal, well-understood, and directly addresses the reported issue with Var IDs not being copied to DebounceInput
• No files require special attention

Important Files Changed

Filename	Overview
reflex/components/core/debounce.py	Added null check before copying ID from child to fix issue where Var IDs were being skipped

Sequence Diagram

sequenceDiagram
    participant User as User Code
    participant DI as DebounceInput.create()
    participant Child as Child Component (rx.input)
    participant Props as Props Dict
    
    User->>DI: create(child=rx.input(id=Var.create("myid")))
    DI->>Child: Get child.id
    Child-->>DI: Returns Var("myid")
    
    alt Before Fix
        DI->>Props: Check if child_ref exists
        Note over DI,Props: Only copy ID if ref exists<br/>(indentation made it conditional)
        DI->>Props: props["id"] = child.id (skipped!)
    end
    
    alt After Fix
        DI->>Props: Check if child_ref exists
        DI->>Props: Set input_ref if needed
        DI->>Props: if child.id is not None
        DI->>Props: props["id"] = child.id ✓
    end
    
    DI-->>User: Returns configured DebounceInput

Loading

[greptile-apps]

_{1 file reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[benedikt-bartscher]

ref #3564

[abulvenz]

ref #3564

Ah, thanks! You are right. I linked the wrong issue in the description. Corrected now.