We Keep Coding

React modal scroll to top

I have a modal with a long form in my react application. So when I submit the form I am showing the validation messages from the server on top of the form. So the user has to scroll to the top to view the messages. So I want to automatically scroll to the top when the message appears. So I added the below code in the submit handler function. But it is not working.
setAddModalErrorMsg([{ msg: res.data.msg, type: "error" }])
window.scrollTo({
top: 0,
left: 0,
behavior: "smooth"
});

The other answers showed how you can scroll the modal to the top, and that is the generally accepted way of achieving this, though, I want to show you how to scroll the "Message" into view, regardless of whether it's on the top or not.
You would also need to create a ref to where you display your message and use the scrollIntoView functionality to scroll the modal to your validation message.
import React, { useRef } from 'react';
const Modal = () => {
const validationMessageRef = useRef();
const setAddModalErrorMsg = () => {
// scrolls the validation message into view, and the block: 'nearest' ensures it scrolls the modal and not the window
validationMessageRef.current?.scrollIntoView({ block:'nearest' });
}
return (
<div>
<div ref={validationMessageRef}>
// your validation message is displayed here
</div>
// rest of your modal content here
</div>
)
}

to automatically scroll to the top we can use the below code :
constructor(props) {
super(props)
this.myRef = React.createRef() // Create a ref object
}
add the scrollTo function after setAddModalErrorMsg.
setAddModalErrorMsg([{ msg: res.data.msg, type: "error" }])
this.myRef.current.scrollTo(0, 0);
<div ref={this.myRef}></div>
attach the ref property to a top dom element

You're trying to scroll window, but chances are your window is already at the top, it's your modal element that needs to scroll up.
To do this, i'd create a reference to the modal element, then in your function scroll the modal element via the ref, so something along the lines of:
import React, {useRef} from 'react';
const Modal = (props) => {
// use the useRef hook to store a reference to the element
const modalRef = useRef();
const setAddModalErrorMsg = () => {
// check the ref exists (it should always exist, it's declared in the JSX below), and call a regular javascript scrollTo function on it
modalRef.current?.scrollTo({x: 0, y: 0, animated: false});
}
// see here we create a reference to the div that needs scrolled
return (
<div ref={modalRef}>
{ // your modal content }
</div>
)
}

How to Double Click Toggle visibility of React Component?

Currently have a popup component showing up double click using the onDoubleClick() handler.But I'd like to close that popup on double click of the popup component but I can't seem to get it to work. Here is what I have been trying, the thought process was to just to set toggleModal to false and it should work.
const [selectedImageId, setSelectedImageId] = useState(-1);
const [toggleModal, setToggleModal] = useState(false);
const handleModalPopupOnClick = (id) => {
setSelectedImageId(id);
setToggleModal(true);
};
return (
<div>
{toggleModal && <PopupModal onDoubleClick={setToggleModal(false)}/>}
<div onDoubleClick{()=> handleModalPopupOnClick(image.id)>Open Popup</div>
</div>
)
Any ideas? Thank you for any suggestions or guidance.

The line
{toggleModal && <PopupModal onDoubleClick={setToggleModal(false)}/>}
Is immediately calling setToggleModal with an argument of false when the component is rendered, and I believe undefined becomes the value of onDoubleClick. (Not 100% on if setState has a return value or not)
To fix your problem you should provided this as a prop:
{toggleModal && <PopupModal onDoubleClick={() => setToggleModal(false)}/>}
This is providing a function definition rather than calling the function.

Maybe PopupModal is your custom component, so it doesn't provide onDoubleClick event.
onDoubleClick in this line:
{toggleModal && <PopupModal onDoubleClick={setToggleModal(false)}/>}
is just a prop.
So you must call props.onDoubleClick in the handler of onDoubleClick event inside the PopupModal.

Simulating a click on dynamically rendered React element

I am creating a geography game where you are supposed to click on a specific country on a world map - if you click on the right one, the country changes color and the game presents a new country to be clicked at. If the player doesn't know, he can click on a button which will show him the correct answer. For this, I want to simulate a click event, so that the same onClick() function is called as if you clicked on the correct country.
I am using D3, and the world map is made up of svg paths. Below is the code I thought would work, using the HTMLElement.click() method:
function simulateClick() {
// for each index in the nodelist,
// if the properties are equal to the properties of currentTargetUnit,
// simulate a click on the path of that node
let nodelist = d3.selectAll(".unit")
for (let i = 0; i < nodelist._groups[0].length; i++) {
if (nodelist._groups[0].item(i).__data__.properties.filename === currentTargetUnit.properties.filename) {
console.log(nodelist._groups[0][i])
// logs the correct svg path element
nodelist._groups[0][i].click()
// logs TypeError: nodelist._groups[0][i].click is not a function
}
}
}
I then looked at some tutorials which say that, for some reason I don't fully understand, you rather need to use React.useRef for this - but in all their examples, they put a "ref" value on an element which is returned from the beginning in the React component, like so:
import React, { useRef } from "react";
const CustomTextInput = () => {
const textInput = useRef();
focusTextInput = () => textInput.current.focus();
return (
<>
<input type="text" ref={textInput} />
<button onClick={focusTextInput}>Focus the text input</button>
</>
);
}
This obviously doesn't work because my svg path elements aren't returned initially. So my question is - how can I achieve this, whether using useRef or not?
Below are some previous questions I looked at which also did not help.
Simulate click event on react element
React Test Renderer Simulating Clicks on Elements
Simulating click on react element

I finally solved it - instead of calling the onClick() which was set inside the node I created a new clickevent with the help of the following code:
function simulateClick() {
let nodelist = d3.selectAll(".unit")
for (let i = 0; i < nodelist._groups[0].length; i++) {
if (nodelist._groups[0].item(i).__data__.properties.filename === currentTargetUnit.properties.filename) {
var event = document.createEvent("SVGEvents");
event.initEvent("click",true,true);
nodelist._groups[0].item(i).dispatchEvent(event);
}
}
}

How to control order of rendering in vue.js for sibling component

I have following kind of code:
<div>
<compA />
<compB />
</div>
How do I make sure that first compA is rendered only after it compB is rendered.
Why I want is I have some dependency on few elements of compA, and style of compB depends on presence of those elements.
Why in details:
I have some complex UI design, where one box will become fixed when you scroll. SO It will not go above the screen when you scroll, it will be fixed once you start scrolling and it start touching the header. So I am using jquery-visible to find if a div with a particular id is visible on the screen, if it is not visible, I change the style and make that box fixed. Following code should give the idea what I am doing:
methods: {
onScroll () {
if ($('#divId').visible(false, false, 'vertical')) { // This is div from the compA, so I want to make sure it is rendered first and it is visible
this.isFixed = false
} else {
this.isFixed = true
}
}
},
mounted () {
window.addEventListener('scroll', this.onScroll() }
},
destroyed () {
window.removeEventListener('scroll', this.onScroll)
}
I dont want to make those in same component as one reason is it dont make sense as the nature of these components, and other I use compA at many places, while compB is specific to only one page. Also layout of these does not allow me to make compB child of compA as suggested in comments.
Any suggestions are welcome.

An option with events:
<!-- Parent -->
<div>
<comp-a #rendered="rendered = true"></comp-a>
<component :is="compB"></component>
</div>
<script>
// import ...
export default {
components: { CompA, CompB },
watch: {
rendered: function (val) {
if (val) this.compB = 'comp-b';
}
},
data() {
return {
rendered: false,
compB: null
}
}
}
</script>
<!-- Component B -->
<script>
export default {
mounted() {
this.$emit('rendered');
}
}
</script>

After going through the edit I realised that the dependency is not data driven but event driven (onscroll). I have tried something and looks like it works (the setTimeout in the code is for demonstration).
My implementation is slightly different from that of Jonatas.
<div id="app">
RenderSwitch: {{ renderSwitch }} // for demonstration
<template v-if='renderSwitch'>
<comp-a></comp-a>
</template>
<comp-b #rendered='renderSwitchSet'></comp-b>
</div>
When the component-B is rendered it emits an event, which just sets a data property in the parent of both component-A and component-B.
The surrounding <template> tags are there to reduce additional markup for a v-if.
The moment renderSwitch is set to true. component-a gets created.

React set scroll position before component mount

I have the below react component which is essentially a chat-box
render(){
const messages = this.props.messages;
return(
<div id="project_chat">
<h1>{this.props.project[0].project}</h1>
<div className="chat_room">
<div className="messages" ref="messages">
<Waypoint onEnter={this.activateWayPoint}/>
<ul>
{messages.map((message) => {
return(
<Message key={uuid.v4()} message={message}/>
)
})}
</ul>
</div>
<div className="chat_message_box">
<input type='text' onChange={this.handleChange} value={this.state.message} className="message_box" placeholder="enter message"/>
<button className="submit_message" onClick={this.handleSubmit}>Submit</button>
</div>
</div>
</div>
)
}
the problem i faced is the chat messages box starts at the topmost position of the container (scroll position starts at the top). I wanted the scroll position to be at the bottom like a normal chat room.
so i tried doing this:
componentDidMount(){
this.refs.messages.scrollTop = this.refs.messages.scrollHeight
}
this triggers AFTER the component gets mounted i.e - the message box scroll position initially starts at the top and forces its way to the bottom on render.
this is normally fine but i'm using a library called react-waypoint which would help me paginate chat messages. this gets triggered every time i'm at the top of the container.
the unhappy consequence is that because the message box starts at the top initially on mount, the waypoint always gets triggered on mount as well.
my question is whether i can force the message component to start at the bottom position as opposed to starting the top and going to the bottom at the beginning
I tried doing this
componentWillMount(){
this.refs.messages.scrollTop = this.refs.messages.scrollHeight
}
the problem is i dont have access to refs before the component mounts. is there any other way?

What you want is to avoid firing this.activateWayPoint before you've set scrollTop.
You can do this by setting a state variable waypointReady to false initially. Set it to true in componentDidMount.
Then, you can modify this.activateWayPoint to check this.state.waypointReady, and return immediately if it is false.
// inside component
getInitialState() {
return { waypointReady : false }
}
componentDidMount() {
this.refs.messages.scrollTop = this.refs.messages.scrollHeight;
this.setState({ waypointReady : true});
}
activateWayPoint() {
if (! this.state.waypointReady) return;
// Your code here!
// ...
}
You will probably have to bind this inside your render function:
// ...
<Waypoint onEnter={this.activateWayPoint.bind(this)}/>
// ...
Alternately, instead of performing the check inside this.activateWayPoint, you might perform the check inside render:
// ...
<Waypoint onEnter={
this.state.waypointReady ?
this.activateWayPoint :
null
}/>
// ...
This assumes that your component re-renders every time you setState.