Fix DebounceInput with native DOM elements (ReferenceError)

[masenf]

All Submissions:

• Have you followed the guidelines stated in CONTRIBUTING.md file?
• Have you checked to ensure there aren't any other open Pull Requests for the desired changed?

Type of change

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

Changes To Core Features:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your core changes, as applicable?
• Have you successfully ran tests with your changes locally?

Description

Problem: When rx.debounce_input wraps native DOM elements (e.g., rx.el.input, rx.el.textarea), the frontend raises ReferenceError: input is not defined because the element prop was passed as a bare identifier instead of a string literal.

Root Cause: The DebounceInput.create() method was passing child.alias or child.tag directly as a JavaScript expression. For native elements with no library, this resulted in unquoted identifiers like input instead of the string literal "input".

Solution:

1. Added _get_tag_name() method to Component that returns the tag name properly quoted as a string literal when it's a global scope element (native DOM tag with no library).
2. Updated DebounceInput.create() to use child._get_tag_name() instead of manually constructing the tag reference.
3. This ensures native elements are passed as "input" (string) while library components remain as identifiers like RadixThemesTextField.Root.

Test Coverage

• Added integration test (test_debounce_input.py) that verifies rx.debounce_input correctly renders and handles native input and textarea elements with debouncing.
• Added unit tests (test_debounce.py) covering both native element and library component children to ensure proper tag name handling.
• All tests pass; no frontend errors raised.

https://claude.ai/code/session_01DDtiK8EdqxtjVFRuykh4hD

[codspeed-hq]

Merging this PR will not alter performance

✅ 26 untouched benchmarks
⏩ 8 skipped benchmarks¹

---

_{Comparing claude/modest-heisenberg-s0qy3a (69d7aa1) with main (f232cf4)}

Footnotes

1. 8 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

[greptile-apps]

Greptile Summary

This PR fixes a ReferenceError: input is not defined that occurred when rx.debounce_input wrapped native DOM elements like rx.el.input or rx.el.textarea. The root cause was that DebounceInput.create() passed child.alias or child.tag as a bare JS identifier, so native tags (which have no library) arrived at the frontend unquoted.

• Extracts tag-name quoting logic from Component._render() into a new Component._get_tag_name() method that wraps global-scope tags in string literals; _render() and DebounceInput.create() both delegate to it.
• The fix is covered by two new unit tests (native element → quoted, library component → unquoted identifier) and a full Playwright integration test that verifies no frontend errors and correct state propagation through debounced native inputs.

Confidence Score: 5/5

Safe to merge; the change is a minimal, focused refactor of a single quoting path with no effect on unrelated components.

The extracted _get_tag_name() method is logically identical to the inlined code it replaces in _render(), and the fix in debounce.py is a one-line substitution. Both the native-element and library-component paths are exercised by new unit tests, and the integration test guards against a regression to the original ReferenceError.

No files require special attention.

Important Files Changed

Filename	Overview
packages/reflex-base/src/reflex_base/components/component.py	Extracts the tag-name quoting logic from _render() into a new private _get_tag_name() method; _render() now delegates to it, eliminating duplication.
packages/reflex-components-core/src/reflex_components_core/core/debounce.py	Replaces the ad-hoc str(child.alias or child.tag) expression in DebounceInput.create() with child._get_tag_name(), fixing the ReferenceError for native DOM elements.
tests/units/components/core/test_debounce.py	Adds two focused unit tests: one asserting native elements produce a quoted element prop, and one asserting library components keep their unquoted identifier.
tests/integration/tests_playwright/test_debounce_input.py	New end-to-end integration test verifying no frontend errors and correct state propagation through debounced native inputs.
packages/reflex-base/news/6637.misc.md	Changelog entry for the new Component._get_tag_name() helper.
packages/reflex-components-core/news/6637.bugfix.md	Changelog entry describing the rx.debounce_input ReferenceError fix for native DOM elements.

_{Reviews (1): Last reviewed commit: "Add news fragments for #6637" | Re-trigger Greptile}