Im building a web chat app in next.js and i have a emoji picker button that when its clicked the menu of emojis appear.The thing is that in order to the user sees the menu of the emojis he has to scroll down.I have tried scrollIntoView() but it doesnt seem to work,possibly im doing something wrong.
<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>
You are conditionally rendering the picker Component and the showEmojis state is also being set in the same click listener. State updates may be async and you are calling scrollIntoView on element which doesn't exist.
In order to scroll into view once the picker is opened, you need to call scrollIntoView from useEffect once it is opened.
useEffect(() => {
if(showEmojis) {
document.getElementById('picker').scrollIntoView(true)
}
} , [showEmojis])