Scroll into a div that is hidden initially in react-CodePudding

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.

import {Picker} from "emoji-mart";
const pickerRef = useRef()
const[showEmojis,setShowEmojis]=useState(false);

useEffect(() => {
  if(showEmojis) {
   pickerRef.current.scrollIntoView(true)
  }
} , [showEmojis])


return(
   <EmoticonContainer >
            
        {showEmojis && (<Picker ref={pickerRef} id="picker" style={{width: '100%'}} onSelect={addEmoji}/>)}
            
    </EmoticonContainer>
)

const EmoticonContainer=styled.div`
display:flex;
flex-direction:column;
`;

I tried this code but it doesnt seem to work.It gives me this error: TypeError: pickerRef.current.scrollIntoView is not a function

CodePudding user response：

Hey try adding a div below the picker and scroll to that div because sometimes those third party libraries come with there css and you could not override them

import {Picker} from "emoji-mart";
const pickerRef = useRef()
const[showEmojis,setShowEmojis]=useState(false);

useEffect(() => {
 
   pickerRef.current.scrollIntoView(true)
  
} , [showEmojis])


return(
<>
   <EmoticonContainer >
        <Picker id="picker" style={{width: '100%'}} onSelect={addEmoji}/>
    </EmoticonContainer>
    <div ref={emojiRef}></div>
</>
)

const EmoticonContainer=styled.div`
display:flex;
flex-direction:column;
`;

Try this and see it will scroll the way you need

CodePudding user response：

Since it is hidden in the beginning then pickerRef.current should return undefined which would cause that error since undefined doesn't have the method .scrollIntoView. To fix this you could do ?.

pickerRef.current?.scrollIntoView()

see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

The optional chaining operator (?.) enables you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid.