Using custom select with react-hook-form

[abrehamgezahegn]

For whoever is interested in doing this. Here is how I did it, and it worked like a charm.

Stop ✋ All you need is here ⬇️

Codesandbox: https://codesandbox.io/s/custom-select-component-with-react-hook-form-jj91d

Code overview

Some files and theme variables are not included. Head to the Codesandbox to see full version

Select component

TSX

import { Container } from "./styles";
import useOutsideClick from "../../../hooks/useOutsideClick";

type Option = {
  value: string;
  label: string;
};
type Props = {
  options: Option[];
  selectProps: object;
  value?: string;
  error?: boolean;
  name: string;
};

const Select = ({
  options,
  selectProps,
  value,
  error = false,
  name,
}: Props) => {
  const [isOpen, setOpen] = useState(false);
  const [selected, setSelected] = useState(value);
  const selectRef = useRef(null);
  useOutsideClick(selectRef, () => {
    setOpen(false);
  });

  useEffect(() => {
    const element = document.getElementById(name);
    console.log("element", element);
    if (element) {
      (element as HTMLSelectElement).value = selected as string;
    }
  }, [selected]);

  return (
    <Container isOpen={isOpen} error={error}>
      <select {...selectProps} id={name} name={name} className="html-select">
        {options.map((item) => (
          <option key={item.value} value={item.value}>
            {item.label}
          </option>
        ))}
      </select>
      <div
        ref={selectRef}
        onClick={() => {
          setOpen((prev) => !prev);
        }}
        className="custom-select-wrapper"
      >
        <div className={`custom-select ${isOpen && "open"}`}>
          <div className="custom-select__trigger">
            <span>
              {options.find((item) => item.value === selected)?.label ||
                "Select"}
            </span>
            <div className="arrow"></div>
          </div>
          <div className="custom-options">
            {options.map((item) => (
              <div
                key={item.value}
                onClick={() => {
                  setSelected(item.value);
                }}
                className="option-container"
              >
                <span
                  className={`custom-option ${
                    selected === item.value && "selected"
                  } `}
                  data-value={item.value}
                >
                  {item.label}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Container>
  );
};

export default Select;

###Style

import styled from "styled-components";
import { baseInput } from "../StyledElements";

type Props = {
  isOpen: boolean;
  error: boolean;
};

export const Container = styled.div<Props>`
  .html-select {
    display: none;
  }
  .custom-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%;
  }
  .custom-select {
    ${baseInput}
    padding-right: 8px;
    background: ${(props) => props.theme.white};
    position: relative;
    cursor: pointer;
    color: ${(props) => props.theme.grey3};
  }
  .custom-select__trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }
  .custom-options {
    position: absolute;
    display: block;
    top: 100%;
    left: 0;
    right: 0;
    background: ${(props) => props.theme.white};
    transition: all 0.5s;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 2;
    padding: 8px;
  }
  .custom-select.open .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    margin-top: 8px;
    box-shadow: -1px 1px 2px rgba(67, 70, 74, 0.0001),
      -2px 2px 5px rgba(67, 86, 100, 0.123689);
    border-radius: 8px;
  }
  .custom-option {
    position: relative;
    display: block;
    padding: 5px 8px;
    cursor: pointer;
    transition: all 0.5s;
    border-radius: 6px;
    color: ${(props) => props.theme.grey3};
    ${(props) => props.theme.medium_14};
    margin-bottom: 12px;
    height: 32px;
  }
  .custom-option:hover {
    cursor: pointer;
    background-color: ${(props) => props.theme.primary5};
  }
  .custom-option.selected {
    color: ${(props) => props.theme.grey3};
    background-color: ${(props) => props.theme.primary5};
  }

  .arrow {
    position: relative;
    height: 7.72px;
    width: 12.26px;
  }
  .arrow::before,
  .arrow::after {
    content: "";
    position: absolute;
    bottom: 0px;
    width: 0.15rem;
    height: 100%;
    transition: all 0.5s;
  }
  .arrow::before {
    left: -2px;
    transform: rotate(45deg);
    background-color: ${(props) => props.theme.grey3};
  }
  .arrow::after {
    left: 2px;
    transform: rotate(-45deg);
    background-color: ${(props) => props.theme.grey3};
  }
  .open .arrow::before {
    left: -2px;
    transform: rotate(-45deg);
  }
  .open .arrow::after {
    left: 2px;
    transform: rotate(45deg);
  }
`;

###Usage

        <Select
          options={[
            { value: "fullTime", label: "Full time" },
            { value: "partTime", label: "Part Time" },
            { value: "casual", label: "Casual" },
            { value: "contract", label: "Contract " },
          ]}
          error={Boolean(errors.employedStatus)}
          value={state.employedStatus}
          name: "employedStatus",
           selectProps={{ // this is applied to native html element so that react-hook-form can wold.
            ref: register({
              required: "This is a required field",
              minLength: 1,
            }),
          }}
        />

CSS credit goes to https://andrejgajdos.com/custom-select-dropdown/ ❤️

[abrehamgezahegn]

@bluebill1049 you might find this interesting.

[JeromeDeLeon]

It might be better with CodeSandbox. Though I must say that the custom component could be handled with the Controller component provided by the lib, still thank you for providing this awesome component. ☺️

[bluebill1049]

if you don't have a UI depend on, I would just use custom register :)

useEffect(() => {
  register('test');
}, [register])

[mutheusalmeida]

I checked the examples and they are all great. Does the Controller work with any component it's given? Not necessarily a UI library component. In my case, I was aiming to use my own component that doesn't depend on a UI library.

Same doubt. Is there a way to use Controller with a custom select component same as @abrehamgezahegn? Or a custom register is still the best option? @bluebill1049

[bluebill1049]

I prefer useController hook.

[mutheusalmeida]

I prefer useController hook.

I don't get how can I do this. With a ui library it looks easy but I can't figure out how to do it with a handmade one

[bycolour2]

I prefer useController hook.

I don't get how can I do this. With a ui library it looks easy but I can't figure out how to do it with a handmade one

Any news on this topic?

[abrehamgezahegn]

@bluebill1049 I will look into that. Thanks ❤️ .

[NicolasZim]

This solution looks great but I have found some flaws that make it unusable in my case.

If you use the ID/Class for getting the select element you can't have more than one select component in the same page, otherwise you will select a list of select elements (Solving this problem with classes or IDs it's not a great idea IMHO).

Right now I'm struggling because I can't find a way to refactor this:

  useEffect(() => {
    const element = document.getElementById(name);
    console.log("element", element);
    if (element) {
      (element as HTMLInputElement).value = selected as string;
    }
  }, [selected]);

Into something that update the select value.

[NicolasZim]

My solution was refactoring into controlling everything, as said in:
What if you don't have access to ref? https://react-hook-form.com/faqs#question6 (From FAQ docs)

[Pablets]

You can use another ref to avoid select an element by its ID

...
const selectRef = useRef(null);
// Here you can create a new ref that points to the select component
const youMustAddThisRef = useRef(null)

 useOutsideClick(selectRef, () => {
   setOpen(false);
 });


useEffect(() => {
   // if the ref is not null then you have the reference only to this "select" node
   if (anotherRef.current) {
     (selectRef.current as HTMLInputElement).value = selected as string;
   }
 }, [name, selected]);
 
 return (
   <Container isOpen={isOpen} error={error}>
     <select 
       {...selectProps} 
       id={name} 
       name={name} 
       className="html-select" 
       ref={youMustAddThisRef} // Here you must put the ref
     >
         {options.map((item) => (
           <option key={item.value} value={item.value}>
             {item.label}
           </option>
       ))}
     </select>
...

[AlexisN94]

In my case, all I needed was to know that this could be done: https://www.carlrippon.com/using-a-forwarded-ref-internally/

[mxy8319]

great！！

[zloegucci]

`const {
register
} = useFormContext()

/** */
const id = ${name}-${type}-${label}

/** /
const [isOpen, setOpen] = useState(false)
/* /
const [selected, setSelected] = useState(value)
/* */
const selectRef = useRef(null)

useOutsideClick(selectRef, () => {
setOpen(false)
})

useEffect(() => {
/** */
const element = document.getElementById(id)

if (element) {
  (element as HTMLInputElement).value = selected as string
}

}, [selected]) return (

<select
className={styles.htmlSelect}
id={id}
{...register(name)}
>
{options.map((item) => (

{item.desc}

))}

<div
className={styles.customSelectWrapper}
onClick={() => { setOpen((prev) => !prev) }}
ref={selectRef}
>
<div className={cn(styles.customSelect, isOpen && styles.open)}>

{options.find((item) => item.value === selected)?.desc ||
label}

{options.map((item) => (
<div
className={styles.optionContainer}
key={item.value}
onClick={() => { setSelected(item.value) }}
>
<span
className={cn(styles.customOption, selected === item.value && styles.selected)}
data-value={item.value}
>
{item.desc}

))}

)`

what i do wrong? The data is always an empty string