CODEWITHSUNDEEP
javascriptreactjsmaterial-uimobile-safari
Super Toptal
Super Toptal

Reputation: 587

React Mui TextField for currency input - how to permit enter digits only in iPhone Safari browser

I have a Mui TextField component for currency input and I made it to show numeric keyboard only in Safari Browser.

But when the user tries to paste literal string into the field, I'd like to prevent it and make it sure that allows enter currency number inputs only.

import { TextField } from '@mui/material';
export default function CustomCurrencyTestScreen(props){
    const [amount, setAmount] = useState('');

    const handleChange = e => {
       setAmount(e.target.value);
    }
    const handleBlur = e => {
       //some validation functionalities
    }
    
    return (
      <TextField
        size="small"
        id="amount"
        name="amount"
        onChange={handleChange}
        onBlur={handleBlur}
        inputProps={{
           style:{
              fontSize:14,
           }
           inputMode:'numeric',
        }}
        InputProps={{
                startAdornment: (
                    <InputAdornment position="start">
                        $
                    </InputAdornment>
                ),
                endAdornment:(
                  <InputAdornment position='end'>
                    {
                      Boolean(amount) && 
                      
                        <CancelRounded size="small" color="grey" sx={{padding:0}} onClick={()=>
                        setAmount('')}/>
                      
                    }
                  </InputAdornment>
                ),
            }}
      />
    );

}

It shows numeric keyboard successfully in Safari browser, however, when you paste the literal string into the field, the field shows it.

How can I prevent user not to input or paste other characters than numbers(float value also)?

I tried with CurrencyInput and IMaskInput, but there's a problem in implementing startAdornment and endAdornment, so I don't prefer it.

Is there any solution to implement Currency Input with Adornment in Mui, working correctly in Safari Browser?

Upvotes: 1

Views: 5393

Answers (2)

EmrahYT
EmrahYT

Reputation: 81

You can add onPaste handler to your TextField component so that you can implement your logic within this function.

const handleOnPaste = e => {
 //do whatever you want with the pasted value
 //add your logic here
}

<TextField 
  ...
  onPaste={handleOnPaste}
  ...

Upvotes: 0

Nathan
Nathan

Reputation: 78509

I don't think there's any way to prevent an actual paste, but you could use a useEffect on amount, and strip out all non-numeric characters:

useEffect(() => {
   function hasNonNumeric(s) {
      // return true if has non numeric
   }

   function stripNonNumeric(s) {
      // logic here that returns a string with non-numeric chars stripped
   }
   if(hasNonNumeric(amount)) {
      setAmount(stripNonNumeric(amount))
   }
}, [amount])

That being said, I probably wouldn't recommend doing it, I hate when websites mess with stuff I paste. Rather, I'd recommend having validation, and showing an error if it contains non-numeric allowing the user to fix it on their terms.

Upvotes: 1

Related Questions