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.
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; `;Probé este código pero parece que no funciona. Me da este error: TypeError: pickerRef.current.scrollIntoView no es una función
Oye, intenta agregar un div debajo del selector y desplázate hasta ese div porque a veces esas bibliotecas de terceros vienen con CSS y no puedes anularlas.
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; `;Pruebe esto y vea que se desplazará de la manera que necesita
Dado que está oculto al principio, pickerRef.current debería devolver undefined, lo que causaría ese error, ya que undefined no tiene el método .scrollIntoView . Para arreglar esto que podrías hacer ?.
pickerRef.current?.scrollIntoView()consulte: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
El operador de encadenamiento opcional (?.) le permite leer el valor de una propiedad ubicada en lo profundo de una cadena de objetos conectados sin tener que verificar que cada referencia en la cadena sea válida.