MUI: How can I resolve the issue of TextField not supporting the number type with maxLength restriction?

Question

MUI: How can I resolve the issue of TextField not supporting the number type with maxLength restriction?

I am currently facing an issue with applying maxLength to the TextField component when the type is set to number.

Here is my code snippet:

const CustomTextField = ({
    label,
    value,
    maxLength,
    required,
    disabled,
    handleChange,
    handleClear,
    error,
    helpertext,
    shrink,
    type,
    placeholder
}) => {

    return (
        <TextField
            label={label}
            fullWidth
            size='small'
            variant='standard'
            value={value}
            type={type}
            placeholder={placeholder}
            inputProps={{ maxLength: (maxLength && parseInt(maxLength)) || 99}}
            InputLabelProps={{ shrink: shrink, style: { fontSize: 18 } }}
            required={required}
            onChange={handleChange}
            InputProps={{
                endAdornment: (
                    (value?.length > 0 && !disabled) ? <IconButton onClick={handleClear}>
                        <ClearOutlinedIcon/>
                    </IconButton> : ''
                ),
                readOnly: disabled
            }}
            error={error}
            helperText={helpertext}
        />
    )
}

CustomTextField.propTypes = {
    disabled: PropTypes.bool.isRequired,
    error: PropTypes.bool,
    handleChange: PropTypes.func.isRequired,
    handleClear: PropTypes.func.isRequired,
    helpertext: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    maxLength: PropTypes.string,
    placeholder: PropTypes.string,
    required: PropTypes.bool.isRequired,
    type: PropTypes.string,
    value: PropTypes.string,
}

javascript types material-ui textfield maxlength

Answer 1

Answer №1

    const CustomTextField = ({
    label,
    value,
    maxLength,
    required,
    disabled,
    handleChange,
    handleClear,
    error,
    helpertext,
    shrink,
    type,
    placeholder
}) => {

    return (
        <TextField
            label={label}
            fullWidth
            size='small'
            variant='standard'
            value={value}
            type={type !== 'number' && type}
            placeholder={placeholder}
            inputProps={{ maxLength: (maxLength && parseInt(maxLength)) || 99}}
            InputLabelProps={{ shrink: shrink, style: { fontSize: 18 } }}
            required={required}
            onChange={handleChange}
            onInput={(e) => {
              if (type === 'number') {
                // Allow digits and a single decimal point
                e.target.value = minusAccepted ? e.target.value.replace(/[^-0-9.]/g, '') : e.target.value.replace(/[^0-9.]/g, '');

                // Ensure that there is at most one decimal point
                const decimalCount = (e.target.value.match(/\./g) || []).length;
                if (decimalCount > 1) {
                  e.target.value = e.target.value.slice(0, e.target.value.lastIndexOf('.'));
                }

                // Convert the input value to a number
                const numericValue = parseFloat(e.target.value);

                // Check if the numeric value exceeds the maxValue prop
                if (!isNaN(numericValue) && maxValue !== undefined && numericValue > maxValue) {
                  e.target.value = maxValue.toString();
                }
                if (!isNaN(numericValue) && minValue !== undefined && numericValue < minValue) {
                  e.target.value = minValue.toString();
                }
              }
            }}
            InputProps={{
                endAdornment: (
                    (value?.length > 0 && !disabled) ? <IconButton onClick={handleClear}>
                        <ClearOutlinedIcon/>
                    </IconButton> : ''
                ),
                readOnly: disabled
            }}
            error={error}
            helperText={helpertext}
        />
    )
}

CustomTextField.propTypes = {
    disabled: PropTypes.bool.isRequired,
    error: PropTypes.bool,
    handleChange: PropTypes.func.isRequired,
    handleClear: PropTypes.func.isRequired,
    helpertext: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    maxLength: PropTypes.string,
    placeholder: PropTypes.string,
    required: PropTypes.bool.isRequired,
    type: PropTypes.string,
    value: PropTypes.string,
}

Answer 2

    const CustomTextField = ({
    label,
    value,
    maxLength,
    required,
    disabled,
    handleChange,
    handleClear,
    error,
    helpertext,
    shrink,
    type,
    placeholder
}) => {

    return (
        <TextField
            label={label}
            fullWidth
            size='small'
            variant='standard'
            value={value}
            type={type !== 'number' && type}
            placeholder={placeholder}
            inputProps={{ maxLength: (maxLength && parseInt(maxLength)) || 99}}
            InputLabelProps={{ shrink: shrink, style: { fontSize: 18 } }}
            required={required}
            onChange={handleChange}
            onInput={(e) => {
              if (type === 'number') {
                // Allow digits and a single decimal point
                e.target.value = minusAccepted ? e.target.value.replace(/[^-0-9.]/g, '') : e.target.value.replace(/[^0-9.]/g, '');

                // Ensure that there is at most one decimal point
                const decimalCount = (e.target.value.match(/\./g) || []).length;
                if (decimalCount > 1) {
                  e.target.value = e.target.value.slice(0, e.target.value.lastIndexOf('.'));
                }

                // Convert the input value to a number
                const numericValue = parseFloat(e.target.value);

                // Check if the numeric value exceeds the maxValue prop
                if (!isNaN(numericValue) && maxValue !== undefined && numericValue > maxValue) {
                  e.target.value = maxValue.toString();
                }
                if (!isNaN(numericValue) && minValue !== undefined && numericValue < minValue) {
                  e.target.value = minValue.toString();
                }
              }
            }}
            InputProps={{
                endAdornment: (
                    (value?.length > 0 && !disabled) ? <IconButton onClick={handleClear}>
                        <ClearOutlinedIcon/>
                    </IconButton> : ''
                ),
                readOnly: disabled
            }}
            error={error}
            helperText={helpertext}
        />
    )
}

CustomTextField.propTypes = {
    disabled: PropTypes.bool.isRequired,
    error: PropTypes.bool,
    handleChange: PropTypes.func.isRequired,
    handleClear: PropTypes.func.isRequired,
    helpertext: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    maxLength: PropTypes.string,
    placeholder: PropTypes.string,
    required: PropTypes.bool.isRequired,
    type: PropTypes.string,
    value: PropTypes.string,
}

Answer 3

Answer №2

After reviewing the document, I discovered that it does not have built-in support for my needs. Therefore, I implemented some custom logic using the slice() method and adjusted the input logic as shown below, which ended up working well for me.

const CustomInputField = ({
    label,
    value,
    maxLength,
    required,
    disabled,
    handleChange,
    handleClear,
    error,
    helpertext,
    shrink,
    type,
    placeholder
}) => {

    const _onChange = useCallback(e => {
        if (maxLength && parseInt(maxLength) >= e.target.value.length) {
            handleChange(e)
        }
    })

    const modifiedValue = maxLength ? value?.slice(0, parseInt(maxLength)) : value

    return (
        <InputField
            label={label}
            fullWidth
            size='small'
            variant='standard'
            value={modifiedValue || ''}
            type={type}
            placeholder={placeholder}
            inputProps={{ maxLength: (maxLength && parseInt(maxLength)) || 99, value: modifiedValue || ''}}
            InputLabelProps={{ shrink: shrink, style: { fontSize: 18 } }}
            required={required}
            onChange={_onChange}
            InputProps={{
                endAdornment: (
                    (value?.length > 0 && !disabled) ? <IconButton onClick={handleClear}>
                        <ClearOutlinedIcon/>
                    </IconButton> : ''
                ),
                readOnly: disabled
            }}
            error={error}
            helperText={helpertext}
        />
    )
}

CustomInputField.propTypes = {
    disabled: PropTypes.bool.isRequired,
    error: PropTypes.bool,
    handleChange: PropTypes.func.isRequired,
    handleClear: PropTypes.func.isRequired,
    helpertext: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    maxLength: PropTypes.string,
    placeholder: PropTypes.string,
    required: PropTypes.bool.isRequired,
    type: PropTypes.string,
    value: PropTypes.string,
}

Answer 4

After reviewing the document, I discovered that it does not have built-in support for my needs. Therefore, I implemented some custom logic using the slice() method and adjusted the input logic as shown below, which ended up working well for me.

const CustomInputField = ({
    label,
    value,
    maxLength,
    required,
    disabled,
    handleChange,
    handleClear,
    error,
    helpertext,
    shrink,
    type,
    placeholder
}) => {

    const _onChange = useCallback(e => {
        if (maxLength && parseInt(maxLength) >= e.target.value.length) {
            handleChange(e)
        }
    })

    const modifiedValue = maxLength ? value?.slice(0, parseInt(maxLength)) : value

    return (
        <InputField
            label={label}
            fullWidth
            size='small'
            variant='standard'
            value={modifiedValue || ''}
            type={type}
            placeholder={placeholder}
            inputProps={{ maxLength: (maxLength && parseInt(maxLength)) || 99, value: modifiedValue || ''}}
            InputLabelProps={{ shrink: shrink, style: { fontSize: 18 } }}
            required={required}
            onChange={_onChange}
            InputProps={{
                endAdornment: (
                    (value?.length > 0 && !disabled) ? <IconButton onClick={handleClear}>
                        <ClearOutlinedIcon/>
                    </IconButton> : ''
                ),
                readOnly: disabled
            }}
            error={error}
            helperText={helpertext}
        />
    )
}

CustomInputField.propTypes = {
    disabled: PropTypes.bool.isRequired,
    error: PropTypes.bool,
    handleChange: PropTypes.func.isRequired,
    handleClear: PropTypes.func.isRequired,
    helpertext: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    maxLength: PropTypes.string,
    placeholder: PropTypes.string,
    required: PropTypes.bool.isRequired,
    type: PropTypes.string,
    value: PropTypes.string,
}

MUI: How can I resolve the issue of TextField not supporting the number type with maxLength restriction?

Answer №1

Answer №2

Similar questions

Create a dynamic animation effect by making a div slide on and off the screen

Utilizing JavaScript as the front-end client for a web application connected to the backend of

The lookat() function in three.js isn't functioning according to my requirements

Selecting multiple elements with jQuery's class selector

Navigate to a particular section in the webpage

Last item in Material UI Grid container not filling up entire space

Setting the passport state dynamically to enable redirection upon a callback

Securing Your Content - Preventing Users from Right-Clicking and Using F12 on Your Website

how to retain the state value as a number and enable decimal input in a TextField component in React

Implementing theme in Monaco editor without initializing an instance

Dynamic tooltips with jQuery: enhancing user experience through mouseover and

Scroll horizontally through the number field in Chrome

Unlock the secrets of creating an interactive chat room effortlessly by harnessing the power of J

What are the key distinctions between DOCS and PSD base64 URLs?

Functionality Issue: Submit Button Not Working on Designed Form Select

I am looking to modify the appearance of specific sections of a searched word in React.js, such as making them bold or lighter. Can anyone

What is the best way to utilize Link for navigation in React with Material UI?

Even as I create fresh references, my JavaScript array object continues to overwrite previous objects

Placing jQuery in the lower part of my HTML templates lacks adaptability

Identifying Elements Generated on-the-fly in JavaScript