How can I limit the user input in quantity?-CodePudding

I can limit the quantity of input if the user use the built in arrow icon inside the textfield. But when the user type it, it's not working

<TextField variant="outlined" label="Quantity" 
                onChange={(e) => setItemName({...itemName, quantity: e.target.value})} 
                type="number"
                fullWidth name="quantity"  InputProps={{ inputProps: { min: 0, max: 10, maxLength: 2}}}
                pattern="^-?[0-9]\d*\.?\d*$"
                />

CodePudding user response：

You can do:

onInput={(e) => {e.target.value > 10 ? e.target.value = 10 : e.target.value}}

CodePudding user response：

You can cater that in your onChange handler. Check if the input value is greater than max, assign the max to your input value

<TextField
  variant="outlined"
  label="Quantity" 
  onChange={(e) => {
     const { target: { value, max } } = e;
     let inputValue = value;
     if (inputValue > max) inputValue = max;
     setItemName({ ...itemName, quantity: inputValue })
  }
  type="number"
  fullWidth
  name="quantity"
  InputProps={{ inputProps: { min: 0, max: 10, maxLength: 2}}}   
  pattern="^-?[0-9]\d*\.?\d*$"
/>