Error when `inputType: number` is used with `maxLength` in `TextInput`

[sharjeelyunus]

Describe the bug Getting this error when inputType: number is used with maxLength in TextInput

React Router caught the following error during render DOMException: Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('number') does not support selection.

You will get the error when you type more words than the limit e.g if limit is 5 try to write 6 words

Try here: https://studio.ensembleui.com/app/yeveBgUUti3DDVe8X3DE/screen/ngXZxiPDSV7nvlR9ZOD9

Screenshots

[evshi]

@sagardspeed2 can you take a look at this one, should be simple

[sagardspeed2]

@evshi In the count configuration, you've used the exceedFormatter, which is a part of the Ant Design Input widget. But inside, the widget is using the rc-input plugin to render the input. Now, within this plugin, they're using the setSelectionRange method on the input element.

According to vanilla JavaScript, the setSelectionRange method is not supported on input elements of type number. Because of this, we are facing the error.

[evshi]

@sagardspeed2 what is the solution here then?

[sagardspeed2]

@evshi I tested all other options with input, like max, inputMode but none of them are actually work in way we want, so I suggest we can render https://ant.design/components/input-number this widget on input type number

what you say about this ?

[evshi]

@sagardspeed2 how would that fix the issue w/ maxLength? Perhaps it's better to use tel type instead as suggested in this SO thread https://stackoverflow.com/questions/33406169/failed-to-execute-setselectionrange-on-htmlinputelement-the-input-elements

[sagardspeed2]

@evshi I also gone through thread in my research, I want to suggest that also, but input type number is only for allow numbers into input box, but input type tel will also allow user to type char with numbers also in input

that's only reason I did not suggest

[evshi]

If you can make the behavior work with input number let's go with that

[sagardspeed2]

Sure, I will make that input number behaviour work

[sharjeelyunus]

seems like this is still not fixed, still getting the error @sagardspeed2

[sagardspeed2]

@sharjeelyunus can you share screenshot or video of this

[sharjeelyunus]

Error: React Router caught the following error during render InvalidStateError: Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('number') does not support selection.

https://github.com/user-attachments/assets/4857e011-d66a-4bc6-aad4-9e19facad0c2

[sagardspeed2]

@sharjeelyunus I just checked on ensemble studio dev environment and kitchen sink in react ensemble. it is working very fine without any issue

https://github.com/user-attachments/assets/3f684695-da94-40a8-8a6e-479b14f7ff02