Estoy creando una aplicación de chat web en next.js y tengo un botón selector de emoji que cuando se hace clic en el menú de emojis aparece. La cuestión es que para que el usuario vea el menú de emojis, tiene que desplazarse hacia abajo. Tengo probé scrollIntoView() pero no parece funcionar, posiblemente estoy haciendo algo mal.
<EmoticonContainer > {showEmojis && (<Picker id="picker" style={{width: '100%'}} onSelect={addEmoji}/>)} </EmoticonContainer> <InputContainer id="container" > <IconButton onClick={() => {setShowEmojis(!showEmojis),()=>document.getElementById('picker').scrollIntoView(true)}}> <EmojiEmotionsIcon style={{ color: 'purple' }} fontSize='inherit' /> </IconButton> <Input style={{fontFamily:"Roboto",fontSize:"12px"}} onKeyUp={()=>ChangeSendIcon()} onKeyPress={(e) => { e.key === 'Enter' && e.preventDefault(); }} value={input} onChange={e=> setInput(e.target.value)}/> <div> <IconButton id="send" onClick={sendMessage} style={{ color: 'purple',display:'none' }} disabled={!input} type="submit"> <SendIcon></SendIcon> </IconButton> <IconButton style={{ color: 'purple'}} id="record" onMouseUp={()=>record()}> <MicIcon ></MicIcon> </IconButton> <IconButton style={{ color: 'purple',display:"none" }} onClick={()=>stop()} id="stop" > <StopIcon></StopIcon> </IconButton> </div> </InputContainer>Está representando condicionalmente el Componente picker y el estado showEmojis también se establece en el mismo detector de clics. Las actualizaciones de estado pueden ser asíncronas y está llamando a scrollIntoView en un elemento que no existe.
Para desplazarse a la vista una vez que se abre el selector, debe llamar a scrollIntoView desde useEffect una vez que se abre.
useEffect(() => { if(showEmojis) { document.getElementById('picker').scrollIntoView(true) } } , [showEmojis])