Input type이 number일 때 maxLength 지정안될 때

Input type이 number일 때 maxLength가 지정이 안돼요

AS IS

react hook form 의 Controller에서 인풋과 드랍다운등을 컨트롤 하고 있는데, 이 때 발생한 문제가 인풋에 숫자와 특수기호만 받아야 하고, 최대 길이는 10글자까지 가능해야 하는데, type을 number로 선택해두면 maxLength 옵션이 적용되지 않는 문제였다.

<Controller 
    name="example-number"
    control={control}
    render={({field: {onChange, value }) => (
        <TextField 
            type="number"
            inputProps = {{ maxLength : 10 }}
        />
    )}
/>

 

TO BE

Mui TextField에서 maxLength를 적용하려면 InputProps 안쪽에 정의를 해주어야 한다.
type이 text일 때는 inputProps 안쪽에 정의된 maxLength가 잘 적용되지만 type이 number일 경우엔 이 maxLength 옵션이 적용되지 않습니다. 숫자 타입의 경우 문자열에 사용하는 maxlength 어트리뷰트(속성)가 동작하지 않기 때문이라 다른 방법을 사용해야 합니다.

<Controller 
    name="example-number"
    control={control}
    render={({field: {onChange, value }) => (
        <TextField 
             value={value || ''}
             onChange = {e => {
                 const { value } = e.target
                if ( value === '' ) {
                    onChange(null)
                } else {
                    const filteredValue = 
                        value.replace(/[^0-9!@#$%^&*()_+{}\[\]:;.,\-\\/]/g, '' ).slice(0,10)
                    e.target.value = fileterdValue
                    onChange(e.target.value)
                }

             }}
        />
    )}
/>

이렇게 value의 값을 정규식으로 숫자와 특수기호를 포함한 문자만 받고, slice로 10글자까지 자르면 input의 조건인 숫자와 특수기호만 받아야 하고, 최대 길이는 10글자까지 를 만족시킬 수 있다.

번외

MUI Textfield의 type이 number일 때 오른쪽에 나타나는 화살표를 없애고 싶다면

export const Input = styled(TextField)(({ theme }) => ({
  '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
    display: 'none',
  },
  '& input[type=number]': {
    MozAppearance: 'textfield',
  },
}))

이런식으로 없앨 수 있다.