Reactstrap Modal에서 autoFocus 설정 주의!

Reactstrap을 사용하여 화면을 구성하고 있는데 

조금 더 편한 사용환경을 위해 

Modal이 오픈되면 가장 먼저 입력해야하는 Input에 Auto Focus를 적용하고 싶었다. 

 

근데 설렁설렁 보고 적용하고 싶은 Input 태그에 autoFocus={true} 를 적용하면 되는구나 했더니

에러도 안뜨고 적용도 안되고

이 문제로만 한시간을 씨름한거 같은데 

조금 예전 자료만 봐도 useRef를 써서 Fuction까지 만들어 적용하던데 

 

나는 분명 속성값 하나로 될거라고 생각하고 있었고

그러다 딱 한 자료에서 어이없게 내 방법의 문제를 알았다.

 

해당 Modal에서 autoFocus를 false로 설정하고 적용하고 싶은 Input 태그에 autoFocus를 true로 설정해야 한다.

개인적인 생각으로는 Modal를 띄울 때 내부적으로 Modal 자체에 Focus를 줘버리기 때문에 아무리 Input 태그에 Focus를 줘도 적용되지 않는다 생각하였다. 

 

간단하지만 유의하지 않으면 이번처럼 계속 딴길로 해결책을 찾을거 같아 적어놓아야겠다. 

 

<Modal autoFocus={false}>
  <Form>
    <ModalHeader>Type Your Input</ModalHeader>
    <ModalBody>
      <Input autoFocus={true} />
      <Button>Submit</Button>
    </ModalBody>
  </Form>
</Modal>