react hook form 의 Controller에서 인풋과 드랍다운등을 컨트롤 하고 있는데, 이 때 발생한 문제가 인풋에 숫자와 특수기호만 받아야 하고, 최대 길이는 10글자까지 가능해야 하는데, type을 number로 선택해두면 maxLength 옵션이 적용되지 않는 문제였다.
<Controller
name="example-number"
control={control}
render={({field: {onChange, value }) => (
<TextField
type="number"
inputProps = {{ maxLength : 10 }}
/>
)}
/>
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',
},
}))
이런식으로 없앨 수 있다.