Navigate to a specific section within a div

I am currently developing a web chat application in next.js and have added an emoji picker button. However, when the button is clicked, the emoji menu only appears after scrolling down. I attempted to use scrollIntoView() but it did not work as expected. I may be missing something.

    <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>
javascriptcssreactjsscrollnext.js

Answer №1

When you conditionally render the picker Component, and set the showEmojis state in the same click listener, keep in mind that state updates may occur asynchronously. It's important to note that calling scrollIntoView on an element that doesn't exist can cause issues.

To ensure scrolling into view once the picker is opened, consider using the useEffect hook to call scrollIntoView when the picker is opened:

useEffect(() => {
  if(showEmojis) {
    document.getElementById('picker').scrollIntoView(true)
  }
} , [showEmojis])

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to create an input field exclusively for tags using only CSS?

I am currently facing some limitations with a website I am managing. Unfortunately, I do not have the ability to incorporate additional libraries such as custom jQuery or JavaScript scripts. My goal is to customize an input field for tags so that when us ...

javascriptjqueryhtmlcsstags

Struggling with this CSS is really getting to me

I am struggling to create a modal with the tools and close button appearing on the same line. It should look similar to the image below: var modal = document.getElementById('myModal'); var btn = document.getElementById("myBtn"); var span = doc ...

javascriptjqueryhtmlcss

Retrieve information from a JSON API on one server and showcase it on an HTML page hosted on a different server

I have a situation where I need to transfer data from one project (Project1) to another project (Project2). To achieve this, I decided to convert the Project1 data stored in a database into a JSON API and then call it using an HTML page from Project2. Howe ...

javascriptjqueryhtmljson

Tips for displaying personalized error messages from your REST API in a JavaScript client

I'm utilizing a Java REST API that has been generated using swagger. If the client is unauthorized, I am sending custom error messages in response. public Response collaborationCollabIdDelete(Integer collabId, SecurityContext securityContext, Str ...

javascriptjavarestswagger

Turn off automatic resizing of iframes

I'm currently dealing with a webpage that contains an iframe. The iframe contains quite a bit of data, and every time it loads, its height adjusts to match the content within. Unfortunately, this is causing my page layout to be disrupted. Is there a w ...

htmlcssiframescroll

Using SVG files as properties in React from a data.js file

I have a website where I store my content in a data.js file and pass it to my components using props. Everything is working correctly, except for my .svg files. When I try to display them, they do not appear. However, if I change the extension of the image ...

javascriptcssreactjswebpack

Tips for adjusting the order in which styles load in NuxtJS

I need to adjust the loading order of styles in my current project. In my custom stylesheet style.css, I've made some overrides, body { font-family: "Lato", sans-serif; font-size: 14px; font-weight: 400; font-style: normal; ...

javascriptcssvue.jsbootstrap-vue

Exploring ways to create a dynamic background image that allows the rest of the page to float over seamlessly

Currently working on a responsive website and almost done with the build. However, I came across a site where an image appears to be floating behind the rest of the webpage content. Tried searching for a solution using w3.css without any luck. Any sugge ...

htmlcssresponsive-design

React Timer App: The setInterval function is being reset after each render operation

I'm currently working on a straightforward timer application that will begin counting seconds when a button is clicked. To implement this, I am utilizing react hooks. import React, { useState } from 'react' function Timer() { const [sec ...

javascriptreactjs

Exploring the possibilities of JavaScript within the IntelliJ REST client

I've delved into the extensive documentation provided by JetBrains on their HTTP Client and how to incorporate requests using files with a .http extension. The challenge I'm facing involves utilizing a function from a separate .js file within on ...

javascriptrestclientjetbrains-ide

Tips for resolving the "unexpected token 0 in JSON at position 0" error: When does this error typically appear? What is the main cause behind this error message?

Firstly, I kindly ask for understanding as I am a beginner in learning about servers and how they work. I have been encountering the same error repeatedly and despite my efforts to research and understand it, I am still left confused as to the root cause o ...

javascriptnode.jsreactjsmongodb

Accordion checkbox with dynamic features

Currently, I am dynamically populating data into a jQuery accordion. My goal is to include a checkbox just before the <h2> text. <div id="checkbox"> <h2> <span> <input type="checkbox" class="mycheck" value="apple" / ...

javascriptjqueryhtmljquery-ui

modification of class into hooks, receiving error message 'then' property is not found in type '(dispatch: any) => Promise<void>'

As a newcomer to React hooks, I have been converting code from class components to hooks. However, I am encountering an error message when trying to use 'then' in hooks that says 'Property 'then' does not exist on type '(dispa ...

javascriptreactjstypescriptfunctionreact-hooks

Having trouble with next.js not loading tailwindcss styles?

I have successfully set up next.js with tailwind CSS. I followed all the instructions and made sure everything is configured correctly. Here are the codes: _app.js import '../styles/index.css'; function MyApp({ Component, pageProps }) { retur ...

next.jstailwind-css

Showcasing JSON information in a table using React and Material-UI

I am seeking to create a table-list displaying data from a JSON file containing 1,000 ids. The table should have headers for First Name and Email. Below is the code I currently have: import PostData from '../data/posts.json' function Postlist() ...

reactjsmaterial-ui

In Vue, while templates cannot be assigned keys and cannot be replaced with a div element, it is important to utilize the v-for directive without a wrapper div element, especially when dealing with nested v-for loops

My JSON data looks like this: { "data":{ "1":{ "color":"red", "size":"big" }, "2":{ "color":"red", "size":"big" }, "3":{ "color":"red", "size":"big" }, "4": ...

javascriptvue.jsvuejs2vue-component

Having trouble showing Bootstrap Toasts on my website

I successfully implemented Toast functionality upon button click, but I am facing an issue where I have two buttons and I want a separate Toast to appear for each button click. How can I achieve this? Another problem I encountered is related to the docume ...

javascripthtmltwitter-bootstrapbootstrap-4toast

Utilizing ReactJS to dynamically fetch images via API

I am currently working on loading images from an API to my client app. One idea I had was to save the images in a folder and store the image path in the database, rather than storing the actual image in the database itself. However, I have encountered diff ...

reactjsapi

Fulfill the promise once all map requests have been completed

Currently, my focus is on developing a bookmark page that retrieves bookmark results with the respective restaurant IDs. Once the response is mapped, I populate an array with objects. My objective is to ultimately resolve the entire array in order to mani ...

javascripttypescriptobservable

What is the best way to set a JS variable to the value of a MongoDB field?

I am currently facing an issue where I need to assign a JS variable to a MongoDB field. The code I have written is returning the entire object instead of just the string value assigned to the field. For instance, if I have a document with the field {name ...

javascriptmongodbmeteordatabase