bhrott / react-native-masked-text

A pure javascript masked text and input text component for React-Native.
MIT License
1.61k stars 249 forks source link

money + onChangeText prevents entering zeros at the end #106

Open catamaican opened 6 years ago

catamaican commented 6 years ago

Hi, In my case it is not possible to have something like "12.00 LEI" - it does not accept the 0/zeros

This seems to happen due to onChangeText that looks just simple like this (setting the "Pret") in the state:

_onChangedPret(text) { this.setState({ product: { ...this.state.product, Pret: this._pretPeUMField.getRawValue() } }); }

<TextInputMask ref={ref => (this._pretPeUMField = ref)} type={'money'} value={this.getPretPeUM()} onChangeText={(textPret) => this._onChangedPretPeUM(textPret)} placeholder={'Preț pe unitatea de măsură'} options={{ unit: '', suffixUnit: 'LEI' }} />

Thank you

bhrott commented 6 years ago

Sorry, I didn't understood the error.

Can you add the actual and the expected behaviour?

catamaican commented 6 years ago

Ok, so I've build a minimal app reproducing the actual behaviour with code taken from your examples (attached files) - app.js + package.json TestInputMasks.zip

Actual behaviour:

  1. control no 2 - I cannot enter a whole number (e.g. 12.00)
  2. any other two controls are not accessible via mouse if I touch/click first the control no 1 - when I click it, the input just goes back to the first control
  3. in the 1st and the 3rd TextInputMask controls in the emulator I can write anything I want (picture below) taking into account the second issue above;

Expected: 1,2,3 - working as described in your doc

image

LuisRizo commented 5 years ago

I am currently using RN 0.55.4 in my project and I encountered the same issue as the image shown by @catamaican, which shows that the TextField is displaying the invalid characters entered by the user.

The user is able to enter digits as many characters as they want (ignoring the limit in the mask), as well as enter invalid characters (such as letters in a only-numbers mask). This is a plainly visual issue though, as these invalid characters are not sent to the onChangeText callback.

I created a test project using RN 0.55.4 and I could reproduce this issue, and after looking at the sample project @catamaican uploaded, I saw that the project is using Expo SDK 30, which is based on RN 0.55.4.

After creating a new project with the latest RN version 0.57.4, the issue was gone. This appears to be an issue with the TextInput component in React Native. Something might be broken in 0.55.4 and is not something to blame this library for.

However, I cannot yet upgrade my project, so I will be attempting to find a workaround for this issue. If someone else can come up with a workaround, that'd be great for people like me that cannot upgrade yet to latest RN.

Might be related to https://github.com/facebook/react-native/issues/18874

UPDATE: To fix the issue described above, my project now uses this fork of react-native that has the fix for the issue on top of RN 0.55.4.

npm install react-native@hyrwork/react-native#0.55-stable

bhrott commented 5 years ago

Yes guys =/ This is related to this issue: https://github.com/benhurott/react-native-masked-text/issues/68

goskan93 commented 5 years ago

Hi I noticed that in the newest version of react-native-masked-text again appears the problem with inserting zero when use option includeRawValueInChangeText={true}. I use RN 0.57