react-maskedinput icon indicating copy to clipboard operation
react-maskedinput copied to clipboard

update the pattern does not chanage the value correctly.

Open BesatZardosht opened this issue 9 years ago • 7 comments

let't say the value is 123456 and the pattern is 111111. the input mask will show all the numbers and it works perfectly! if I change mask to 111 the input mask will show 123 which is correct. but if I change the mask back to 11111 it will show 123__ !!!!!! However the value is not changed and even I provide the correct value (123456) again but since the value has not changed it ignores it!!! you can see it here: http://insin.github.io/react-maskedinput/

I would appreciate any help

BesatZardosht avatar Jun 21 '16 17:06 BesatZardosht

I think something is failing to note that the value has actually changed in this case...

jquense avatar Jun 21 '16 17:06 jquense

the value has not changed. I only change the pattern, but when I change the pattern back to the original it does not update the input mask

BesatZardosht avatar Jun 21 '16 17:06 BesatZardosht

The value is shown as "changing" variable:

screen shot 2016-06-21 at 1 59 55 pm

screen shot 2016-06-21 at 2 00 12 pm

you can see in this snapshot that the value is still 12345678 but the input mask is not showing correct value

screen shot 2016-06-21 at 2 00 22 pm

BesatZardosht avatar Jun 21 '16 18:06 BesatZardosht

the value changes, when the new mask causes the value to be truncated, does amount to a change in the underlying value, masks specifically exist to place hard requirement on the shape of the value, so it wouldn't make sense to allow the value to be something non-conforming to its mask.

In my opinion the bug here is that the input mistakenly thinks the value didn't change and so you cannot reset it to the original one.

jquense avatar Jun 21 '16 18:06 jquense

Could be! thanks! the weird thing is it is returning same value for getRawValue and getValue!! and both are the display value

BesatZardosht avatar Jun 21 '16 18:06 BesatZardosht

Check this out, it may help you with your requirements: RxInput demo

  • Use a regular expression to both create the mask and match the input (as you type)

  • Auto complete (you cane see that in the demo)

  • Support alternative patterns (basic regular expression capability)

  • Show a list of available option (hints on what you can enter)

  • Support huge regular expression (hopefully generated programmatically rather than by hand)

  • Implements almost everything that normat javascript regular expressions support (does not support look back and peek forward, but for input processing that is rarely useful)

  • Can use it as an alternative to radio buttons and dropdown list

    I have very happy with the result

  • incr-regex-package

  • react-rxinput

You may remember I mentioned earlier I was working on a version of maskeinput that uses regular expressions to define the mask and matching rules. I have not figured out if it is possible to use the normal regular expression matcher to do this. I actually do not think so. I implement a version of incremental (match as you type) regular expression.

nurulc avatar Aug 12 '16 19:08 nurulc

Hi,

If you need flexible pattern, try react-rxinput demo

int the first input box ( label: Enter a Regular expression: where you can enter your own regular expression)

  • enter the following: \d{3} \d{2,4} that will allow you to enter 3 digits followed by a space and then 2-4 digits
  • If you want to enter only upper case letters [A-Z]{2,5} will let you enter both upper or lower case letters , but lowercase will be translated to uppercase

Tab to the next input box (label: Regex Tester:) you can try out how the regular expression you entered affects the mask and what you can type. Note: you will also see a suggestion box.

The demo page has a a few sample regular expression you can try.

nurulc avatar Aug 18 '16 13:08 nurulc