import React, { useEffect, useRef } from 'react' const Input: React.FC<{ autoFocus?: true; label: string; id: string; type: string }> = ({ label, autoFocus, id, type, }) => { const input = useRef(null) autoFocus && useEffect(() => input.current && input.current.focus(), [input]) return ( <> <label>{label}</label> <input ref={input} id={id} type={type} placeholder={label} /> </> ) } export default Input
Cannot use autofocus? · Discussion #17213 · vercel/next.js
Bug report I cannot use autofocus by using next.js Describe the bug I want the page to autofocus on an input element when it loads, but it doesn't work To Reproduce Steps to reproduce the behav...
https://github.com/vercel/next.js/discussions/17213
🥰 react popover창에서 input에 autoFocus 적용하기
블로그야...안녕....? 근 두달만이구나....😅 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ.... 변명을 해보자면 요새 야근 지옥 + 회사 적응 기간을 거치느라 좀 정신이 없었는데, 이제부터 다시 열심히 써볼거다. 진짜루....😭 아무튼, Next.js에서 클릭시 popover(a.k.a modal)가 뜨는 search 창을 구현하면서 autoFocus, autoSelect를 적용했는데 이에 대해 정리해보려고 한다. (엄청 쉬움 주의😳) input창에 이렇게만 입력해주면 component가 마운트 된 후에 자동으로 focus가 된다.
https://velog.io/@solmii/react-popover%EC%B0%BD%EC%97%90%EC%84%9C-input%EC%97%90-autoFocus-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

