TIL 20220819 Antd에서 포커스 옮기고 자동으로 select option 보여주기

목표

디자인 시스템으로 antd를 사용하고 있는데, 폼에서 회사를 검색하면 자동으로 다음 필드로 포커스가 이동하여, 해당 회사의 직원들의 이름,이메일이 뜨게 하고 싶었다.

사용한 기능

• React
  • React.useRef
• Antd
  • ref
  • showAction

코드

대부분의 코드는 제거하고 실제로 사용한 부분만 기술하도록 한다.

const myApp: React.FC<Props> = () => {
  ... 
  const [userOptions, setUserOptions] = useState<{ id: string; name: string; email: string }[]>([]);
  
  const selectRef = React.useRef<Select>(null); // 보통 Input을 사용한 예제가 많은데 Select도 가능하다.
  
  const onCompanySearch = async (company: string) => {
        const users = (await queryUser({ limit: 20, filters: [["company", "=", company]] })).items;
        setUserOptions(users);
        selectRef.current?.focus(); // 이 함수가 실행되면 지정한 위치로 포커스를 옮긴다.
    };
  
  return (
  	<Form>
    	<Form.Item name="company" label="회사" rules={[{ required: true }]}>
        	<Input.Search onSearch={onCompanySearch} onChange={onChangeCompany} />
        </Form.Item>
	    <Form.Item name="userId" label="이름/이메일" rules={[{ required: true }]}>
            // ref를 설정해 onCompanySearch 함수가 실행되면 이 위치로 포커스가 오도록 했다.
            <Select ref={selectRef} showAction={["focus"]} placeholder="회사명 검색 후 선택.">
              {userOptions.map((user, index) => {
                return (
                  <Select.Option
                  key={index}
				  value={user.id}
			>{`${user.name}(${user.email})`}</Select.Option>
                            );
                        })}
	        </Select>
        </Form.Item>
    </Form>
  )
}

export default myApp;

설명

select의 ref를 지정하면 함수가 실행된 후 해당 element로 포커스가 이동하게 된다.
그리고 포커스가 이동한 후 자동으로 select의 option들을 보여주게 하는 것이 showAction이다.
showAction은 string[] 형태로 dropdown이 활성화될 action을 넣어주면 되고, 여기서는 'focus'가 대상이 된다.

그런데 antd 문서에도 showAction 관련 내용이 없어 찾아본 결과, antd의 select는 rc-select를 기반으로 만들어져 있고, 문서에는 없지만 showAction을 사용할 수 있는 것을 확인했다. (2018년 antd github issue에서도 문서에 추가해야 한다는 이야기가 있었지만 아직도 추가되지 않은 것으로 보임)

참고한 문서

https://github.com/ant-design/ant-design/issues/6873

https://velog.io/@ju_h2/React-ref%ED%86%B5%ED%95%9C-input-%ED%83%9C%EA%B7%B8-%EC%BB%A4%EC%84%9C%ED%8F%AC%EC%BB%A4%EC%8A%A4-%EC%A1%B0%EC%A0%95-class-component%EC%99%80-hooks%EC%97%90%EC%84%9C-%EB%B9%84%EA%B5%90