reflex icon indicating copy to clipboard operation
reflex copied to clipboard

Published 20 hours ago • verified publisher icon reflex-dev

Input missing step attribute

Open Kastier1 opened this issue 1 year ago • 5 comments

Describe the bug A clear and concise description of what the bug is. rx.input does not support the step attribute

step attribute: https://www.w3schools.com/tags/att_input_step.asp

To Reproduce Steps to reproduce the behavior:

  • Code/Link to Repo: rx.input(type="number",step="any",placeholder="10" )

The above code produces: <input spellcheck="false" placeholder="10" type="number" title="" id="radix-:r2n:" name="number" class="rt-reset rt-TextFieldInput">

Expected behavior A clear and concise description of what you expected to happen. The code should produce <input spellcheck="false" placeholder="10" step="any" type="number" title="" id="radix-:r2n:" name="number" class="rt-reset rt-TextFieldInput">

Screenshots If applicable, add screenshots to help explain your problem.

Specifics (please complete the following information):

  • Python Version: Python 3.11.5
  • Reflex Version: 0.5.10/ 0.6.0a1
  • OS:
  • Browser (Optional):

Additional context Add any other context about the problem here.

Kastier1 avatar Sep 17 '24 23:09 Kastier1

Its also missing the autocomplete attribute rx.input(type="number",autocomplete="off",placeholder="10" ) produces

it should produce

Kastier1 avatar Sep 18 '24 16:09 Kastier1

mm, I see. the input component doesn't support these out of the box, I think you would want to try rx.el.input instead. This uses vanilla html

ElijahAhianyo avatar Sep 19 '24 15:09 ElijahAhianyo

@ElijahAhianyo it looks like rx.input inherits from rx.el.Div - should we instead make it subclass rx.el.Input? I don't remember why we didn't, is it because the Radix input doesn't support all the props of a normal input?

picklelo avatar Sep 19 '24 16:09 picklelo

I would like to work in this issue.Can i proceed with it?

Joodith avatar Sep 27 '24 05:09 Joodith

@Joodith just assigned you. I believe the change may be switching the rx.el.Div to rx.el.Input as the parent class. Though perhaps this has some unintended consequences, since I'm not sure why we didn't do this initially.

picklelo avatar Sep 27 '24 23:09 picklelo

I would like to work on this issue can I have it ?

abhinav7289A avatar Oct 03 '24 16:10 abhinav7289A

@abhinav7289A Iam currently working on this.

Joodith avatar Oct 03 '24 16:10 Joodith

@picklelo Is it ok to keep the base class as Input instead of Div because currently the TextField class which inherits Div, only has properties relevant to text type field and not numbers.It does not have any property relevant to numbers.Should we have a separate class for numbers or will the simple base class change would do?

Joodith avatar Oct 04 '24 03:10 Joodith

@Joodith You can try to swap the base class from rx.el.Div to rx.el.Input, but you'll need to make sure that it's also working when the input is controlled (if you set value AND on_change)

When controlled, the Input will instantiate as a DebounceInput internally, and I'm not sure that DebounceInput actually support step.

Lendemor avatar Oct 04 '24 18:10 Lendemor

@Lendemor Raised pull request.

Joodith avatar Oct 05 '24 07:10 Joodith

@Lendemor I saw that few tests in reflex-web integration tests are failing.Should I consider more changes if needed or is it expected one?

Joodith avatar Oct 07 '24 12:10 Joodith

Hi guys is there a quick workaround for this to add temporarly rx.el.input but maintain at least the radix style classes?

jacintoArias avatar Jan 15 '25 05:01 jacintoArias