Make `rx.debounce_input` Work with `rx.el.input` for Flexible Input Styling

[sorousch9]

Describe the Custom Component Hey there! So, I've been playing around with a custom component, and I've run into a hiccup that I need help with. Basically, I'm trying to use rx.debounce_input with rx.el.input instead of the usual rx.input because I want to tweak the styles a bit more. A clear and concise description of what the custom component does.

• Why Am I Doing This? I want more control over how my input fields look and behave. Right now, rx.input adds some default styles and a div that I don’t really want, so using rx.el.input seems like the way to go.

• What Should Happen? Ideally, rx.debounce_input should work just as well with rx.el.input as it does with rx.input, allowing me to debounce my input without running into any errors.

• When Does This Come in Handy? For anyone who wants to customize their input fields beyond the default styling—this would be super helpful!

Extra Info: Right now, trying to use rx.el.input like this throws a frontend error: ReferenceError: input is not defined. Here’s a quick peek at the code causing the headache:

def input_field() -> rx.Component:
    return rx.el.div(
        rx.debounce_input(
            rx.el.input("test", ),
            debounce_timeout=300,
        ),
    )

Would love for rx.debounce_input to recognize and handle rx.el.input without freaking out. Thanks a bunch!

[abulvenz]

• I want more control over how my input fields look and behave. Right now, rx.input adds some default styles and a div that I don’t really want, so using rx.el.input seems like the way to go.

And you can add things like type="tel" then :+1: