react-number-format icon indicating copy to clipboard operation
react-number-format copied to clipboard

add support for paste event given allowedDecimalSeparators

Open Toumash opened this issue 4 years ago • 8 comments

Describe the issue/change

Described here https://github.com/s-yadav/react-number-format/issues/349 by @tenkij

Add CodeSandbox link to illustrate the issue (If applicable)

Codesandbox by @tenkij

Describe specs for failing cases if this is an issue (If applicable)

allowedDecimalSeparators={[",", "."]}

decimalSeparator='.'

  1. paste '11.11', result '11.11';
  2. paste '11,11', result '1 111'

decimalSeparator=','

  1. paste '11.11', result '1 111';
  2. paste '11,11', result '11,11'

Describe the changes proposed/implemented in this PR

Now the paste works with both cases

https://user-images.githubusercontent.com/9840635/123081289-1a488600-d41e-11eb-8a97-002850e185bd.mp4

Please check which browsers were used for testing

  • [x] Chrome
  • [ ] Chrome (Android)
  • [ ] Safari (OSX)
  • [ ] Safari (iOS)
  • [x] Firefox
  • [ ] Firefox (Android)

Quick hack-solution before it gets merged

const DemoField =  useMemo(() => NumberFormatCommaPasteHackTextField(setValue), []);

const NumberFormatCommaPasteHackTextField = (setValue) =>
  (props) => {
    return <TextField
      {...props}
      onPaste={(e) => {
        let pastedText = e.clipboardData.getData('text');
        if (pastedText.indexOf(',') !== -1) {
          e.preventDefault();
          setValue(pastedText.replace(',', '.'));
        }
      }}
    />
  }

return  <NumberFormat
        customInput={DemoField}
        allowedDecimalSeparators={[",", "."]}
        decimalSeparator={'.'}
        thousandSeparator=" "
      />

Toumash avatar Jun 23 '21 10:06 Toumash

Can you also please add a related documentation in README.md file for this prop?

Also, although things look good, I would still prefer another review done by @s-yadav to ensure all perspectives are considered and we don't miss anything. I appreciate your patients on this on this! Thanks!

Done. Waiting for the second review :)

Toumash avatar Jun 24 '21 20:06 Toumash

@s-yadav can we ask for your review on this? This would be a very helpful feature. Thank you

Misiu avatar Dec 20 '21 15:12 Misiu

any updates? )

sowtame avatar Apr 01 '23 15:04 sowtame

any updates?

rhmnaulia avatar Mar 28 '24 03:03 rhmnaulia

Nope, feel free to take it over

Toumash avatar Mar 28 '24 09:03 Toumash

The issue still persist in latest version - @s-yadav Can I help you to finish this PR?

Patriksafar avatar Jun 15 '24 12:06 Patriksafar