MUI Select + React hook form

[jsh0128]

react-hook-form version: ^7.39.5
@mui/material version : ^5.11.14,

Call SelectColumn Component

codesandbox : https://codesandbox.io/s/long-glade-pxvrs5?file=/src/Select.tsx:297-313

import useStore from 'common/hooks/useStore'
import { observer } from 'mobx-react'
import { KeyboardEvent, useCallback, useEffect, useState } from 'react'
import { Control, FieldValues, useForm } from 'react-hook-form'

import changeToPartnerShipKorean from './util/lib/changeToPartnerShipKorean'
import changeToPartnerStatusKorean from './util/lib/changeToPartnerStatusKorean'

import FormColumn from '~components/Molecules/FormColumn'
import SelectColumn from '~components/Molecules/SelectColumn'
import TableSearchForm from '~components/Molecules/TableSearchForm'
import useRouter from '~hooks/useRouter'
import PartnershipType from '~types/partner/PartnershipType'

const DEFAULT_VALUE = {
  name: '',
  owner: '',
  status: undefined,
  partnershipType: undefined,
}

type DefaultValueType = typeof DEFAULT_VALUE

const Partner = () => {
  const [page, setPage] = useState(1)
  const [data, setData] = useState<
    {
      partnerName: string
      ownerName: string
      cooperatedAt: string
      status: string
      partnershipType: string
      id: number
    }[]
  >()

  const {
    PartnerStore: { handleGetPartners },
  } = useStore()

  const { push, query } = useRouter()

  const { register, handleSubmit, reset, control } = useForm({
    defaultValues: query
      ? ({
          ...query,
          partnershipType: query.partnershipType,
          status: query.status,
        } as DefaultValueType)
      : DEFAULT_VALUE,
  })

  const onFetchData = useCallback(
    (search?: DefaultValueType) => {
      handleGetPartners(undefined, {
        page,
        ...(search ?? query),
        size: 30,
        field: 'cooperatedAt',
        direction: 'DESC',
      }).then(({ data }) => {
        // setTotalCount(data.totalElements)
        // setTotalPage(data.totalPages)
        const rows = data.content.map((row) => ({
          partnerName: row.name,
          ownerName: row.businessInformation.owner,
          cooperatedAt: row.cooperatedAt,
          status: changeToPartnerStatusKorean(row.status),
          partnershipType: row.partnerships
            .map((partner) => {
              return partner.partnershipType
                ? ' ' + changeToPartnerShipKorean(partner.partnershipType)
                : ''
            })
            .toString(),
          id: row.id,
        }))

        setData(rows)
      })
    },
    [handleGetPartners, page, query]
  )

  const checkKeyDown = (e: KeyboardEvent<HTMLFormElement>) => {
    if (e.key === 'Enter') e.preventDefault()
  }

  useEffect(() => {
    onFetchData()
  }, [onFetchData])

  if (!data) return <></>

  return (
    <form
      onKeyDown={checkKeyDown}
      onSubmit={handleSubmit((data) => {
        onFetchData(data)
        push({ query: data })
        setPage(1)
      })}
    >
      <TableSearchForm
        onClickReset={() => {
          reset(DEFAULT_VALUE)
          push({ query: {} })
          onFetchData()
        }}
      >
        <FormColumn label="파트너명" register={register('name')} />
        <SelectColumn
          label="제휴상태"
          options={[
            { content: '제휴', value: 'ACTIVE' },
            { content: '계약해지', value: 'INACTIVE' },
          ]}
          name={'status'}
          control={control as unknown as Control<FieldValues>}
        />
        <FormColumn label="대표자명" register={register('owner')} />
        <SelectColumn
          label="제휴유형"
          options={[
            { content: '영업', value: PartnershipType.SALES },
            { content: '시공', value: PartnershipType.CONSTRUCTION },
            { content: '제조사', value: PartnershipType.MANUFACTURING },
            { content: '콜센터', value: PartnershipType.CS },
            { content: 'CPO', value: PartnershipType.CPO },
          ]}
          name={'partnershipType'}
          control={control as unknown as Control<FieldValues>}
        />
      </TableSearchForm>
    </form>
  )
}

export default observer(Partner)

Call Select Component

import { Box, SxProps } from '@mui/material'
import { Control, FieldErrorsImpl, FieldValues } from 'react-hook-form'

import FlexBox from './FlexBox'

import FormError from '~components/Atoms/FormError'
import FormLabel from '~components/Atoms/FormLabel'
import Select, { IOption } from '~components/Atoms/Select'

const DEFAULT_SX: SxProps = {
  width: '100%',
  justifyContent: 'space-between',
  alignItems: 'center',
  position: 'relative',
}

const DEFAULT_SELECT_SX: SxProps = {
  width: '253px',
}

const INPUT_BOX_SX: SxProps = {
  position: 'relative',
}

interface SelectColumnProps {
  label: string
  options: IOption[]
  name: string
  errors?: Partial<FieldErrorsImpl<{ [key: string]: any }>>
  control: Control<FieldValues>
  isError?: boolean
  onChange?: (value: number | string) => void
}

const SelectColumn = ({
  label,
  options,
  errors,
  control,
  name,
  isError,
  onChange,
}: SelectColumnProps) => {
  return (
    <FlexBox sx={DEFAULT_SX}>
      <FormLabel label={label} />
      <Box sx={INPUT_BOX_SX}>
        <Select
          sx={DEFAULT_SELECT_SX}
          name={name}
          options={options}
          errors={errors}
          control={control}
          isError={isError}
          onChange={onChange}
        />
        {errors && errors[name] && <FormError />}
      </Box>
    </FlexBox>
  )
}

export default SelectColumn

this is Select Component

import { MenuItem, Select as MuiSelect, SxProps } from '@mui/material'
import { Control, Controller, FieldErrorsImpl, FieldValues } from 'react-hook-form'

export interface IOption {
  value: string | boolean | number
  content: string
}

interface SelectProps {
  options: IOption[]
  name: string
  sx?: SxProps
  errors?: Partial<FieldErrorsImpl<{ [key: string]: any }>>
  control: Control<FieldValues>
  isError?: boolean
  onChange?: (value: number | string) => void
}

const Select = ({ name, options, sx, errors, control, isError = false, onChange }: SelectProps) => {
  return (
    <Controller
      name={name}
      control={control}
      rules={{ required: isError }}
      render={({ field }) => {
        return (
          <MuiSelect
            value={field.value}
            sx={{
              height: '36px',
              borderRadius: '4px',
              ...sx,
              '& fieldset': {
                ...(errors && errors[name] && { border: '1px solid #e02d3c' }),
              },
            }}
            displayEmpty={true}
            renderValue={() => {
              if (field.value === '' || field.value === undefined) {
                // 수정된 부분
                return '선택하세요'
              }

              const selectedOption = options.find((option) => option.value === field.value) // 수정된 부분
              if (selectedOption) {
                return selectedOption.content
              }
              return field.value
            }}
            onChange={(e) => {
              field.onChange(e.target.value)
              onChange && onChange(e.target.value)
            }}
          >
            <MenuItem selected={false} style={{ display: 'none' }} value="">
              선택하세요
            </MenuItem>
            {options.map(({ value, content }, key) => (
              <MenuItem key={key} value={value as string}>
                {content}
              </MenuItem>
            ))}
          </MuiSelect>
        )
      }}
    />
  )
}

export default Select

If you click reset, it is reflected in the renderValue, but the selected item remains.

If reset, the value of the file.value becomes a rerender, but the value of the rerender value does not become rerender.

So, instead of using the value in the function of renderValue, we take the field.value used above and use it.

In conclusion, if you reset the react-hook-form, I hope that nothing is selected from the selection.

[Moshyfawn]

It's tough to parse all this code in a text form. Please, consider creating a reproducible codesandbox instead

[jsh0128]

https://codesandbox.io/s/long-glade-pxvrs5?file=/src/Select.tsx:297-313

here !

[bbatta38]

You may want to change the default values for status and partnershipType to blank string instead of 'undefined'.

As you can see here the 'undefined' value is not allowed to be one of the available options. It has to be '', 'ACTIVE' and 'INACTIVE'. Once you change the default value to '', it would work well.

[jsh0128]

const DEFAULT_VALUE = {
  status: "",
  partnershipType: ""
};

Even if you change to , the same situation occurs when you put the value of undefined.

I reflected it in the codesandbox, so could you check it again??

[bbatta38]

Sorry if it's too late, Just got notification today. Either you resolved or not, I just had a look and see it's working fine until you put "undefined" as a default value. If you really want to put "undefined" you can probably set a value value={field.value || ""} instead of value={field.value} for the value of MuiSelect. I will leave the codesendbox link, please have a look. Hope it's helpful.

https://codesandbox.io/p/sandbox/nervous-paper-lrz428