React scroll with antd tabs (scrollIntoView) working for some tabs only

Question

I'm building a multi tab chat like UI using react and antd, it looks like image below.

On the left side you can see multiple tabs showing last names using antd Tabs, on the right side I'm using antd comments to display each comment on the conversation thread

Now, the issue is that I'm trying to use useRef so it scrolls automatically to bottom when a new message is sent, and my code works, but only if I'm on the first tab or on the last one but no with the one on the middle and I'm stuck on finding out why

This is my code:

//reference and scroll function
const myRef = useRef(null);
const executeScroll = () => {myRef.current.scrollIntoView({ behavior: "smooth" })};

//useEffect associated to the source of the chat messages array
useEffect(executeScroll, [BuzonDataAgrupado]);

//And the Tab component
<Tabs  tabPosition='left' onChange={handleTabChange}>
      {
         Object.entries(BuzonDataAgrupado).map(([tabName, mensajes]) => {
             return(
                <TabPane tab={tabName} key={tabName}>
                    <Card className='buzon-container'>
                        <div style={divStyle}>
                          {mensajes.map((mensaje) => {
                             return(
                               <Comment className='buzon-message-sent'
                                        key={mensaje._id}
                                        author={<a>{mensaje.nombreFamilia}</a>}
                                        content={<p>{mensaje.Texto}</p>}
                                        datetime={
                                           <Tooltip title
                                           {moment(mensaje.Fecha).format('YYYY-MM-DD HH:mm:ss')}>
                                            <span>{moment(mensaje.Fecha).fromNow()}</span>
                                            </Tooltip>}/>
                                                        
                             )//return
              })} //map

              //This is the reference where is scrolls to at the end of message list
              <div ref={myRef}></div>
           </div>
                                          
           <Divider />
           <div className='buzon-message-editor'>
                                                
              <Form.Item>
                  <TextArea rows={2} onChange={handleMensajeChange} value={NuevoMensaje} />
              </Form.Item>
              <Form.Item>
                 <Button htmlType="submit" loading={SendingMessage} onClick={sendMessage} type="primary">Enviar mensaje</Button>
               </Form.Item>
          </div>
 </Card>

  </TabPane>
 )})
 }    
</Tabs>

Thoughts?

Answer 1

Have you debugged the myRef? Does it get always reassigned to the proper div when you change tab?

I cannot see why your code wouldn't work, but I have an idea for a workaround:

1. give the div an id
2. find the element by the id and use that to scroll

document.getElementById('your-div-id').scrollIntoView({ behavior: 'smooth' })

You could improve this if you put ref on the <Tabs> component (or its parent if it's not possible) and then you could use

tabsRef.current.getElementById('your-div-id').scrollIntoView({ behavior: 'smooth' })

Note that in javascript it might be a good idea to first test if the result of getElementById('your-div-id') is not null or undefined.