Not rendering content if calendar is placed in tab

[ZeeshanAhmadKhalil]

I posted this issue as it was closed previously and there is still that problem.

This issue happens when you add a calendar in material UI tabs and switch to the tab where you have calendar:

Note: If your default tab is that tab where you have a calendar then that issue will not appear you have to switch from another to that tab where you have a calendar.

<div className="tabs-div">
        <AppBar position="static" elevation={0}>
          <Toolbar className="flex w-full">
            <Tabs
              value={tabValue}
              onChange={(e, value) => {
                setTabValue(value)
              }}
              textColor="secondary"
              indicatorColor="primary"
              aria-label="secondary tabs example"
              variant="scrollable"
              scrollButtons="auto"
              classes={{ root: 'w-full h-64' }}
              className="workflow-tabs"
            >
              <Tab icon={<Icon>business_center</Icon>} aria-label="none" />
              <Tab icon={<Icon>chat</Icon>} aria-label="none" />
              <Tab icon={<Icon>assignment_turned_in</Icon>} aria-label="none" />
              <Tab icon={<Icon>camera_alt</Icon>} aria-label="none" />
              <Tab icon={<Icon>attachment</Icon>} aria-label="none" />
              <Tab icon={<Icon>receipt</Icon>} aria-label="none" />
            </Tabs>
          </Toolbar>
        </AppBar>
        <Divider />
        <div className={tabValue !== 0 ? 'hidden' : ''}>
          <Task />
        </div>
        <div className={tabValue !== 1 ? 'hidden' : ''}>
          <Discussion />
        </div>
        <div className={tabValue !== 2 ? 'hidden' : ''}>
          <ScheduledMeeting />
        </div>
        <div className={tabValue !== 3 ? 'hidden' : ''}>
          <CapturePhoto />
        </div>
        <div className={tabValue !== 4 ? 'hidden' : ''}>
          <h1>Notes And Documents</h1>
        </div>
        <div className={tabValue !== 5 ? 'hidden' : ''}>
          <h1>Invoice</h1>
        </div>
      </div>

I have the calendar in <ScheduledMeeting /> as follows:

import FuseUtils from '@fuse/utils';
import { yupResolver } from '@hookform/resolvers/yup';
import _ from '@lodash';
import Button from '@mui/material/Button';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import FormControl from '@mui/material/FormControl';
import TextField from '@mui/material/TextField';
import { motion } from 'framer-motion';
import * as React from 'react';
import { useCallback, useEffect, useRef, useState } from 'react';
import { Controller, useForm } from 'react-hook-form';
import { useDispatch, useSelector } from 'react-redux';
import * as yup from 'yup';
import Typography from '@mui/material/Typography';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import { DialogTitle } from '@mui/material'
import {
    openNewEventDialog,
    openEditEventDialog,
} from '../../store/workflowDialogueSlice';
import EventDialog from './EventDialog';

function renderEventContent(eventInfo) {
    return (
        <div className="flex items-center">
            <Typography className="text-12 font-semibold">{eventInfo.timeText}</Typography>
            <Typography className="text-12 px-4 truncate">{eventInfo.event.title}</Typography>
        </div>
    );
}

function ScheduledMeeting(props) {

    const calendarRef = useRef();
    const { events } = useSelector(({ scrumboardApp }) => scrumboardApp.workflowDialogue)
    const [refresh, ChangeRefresh] = useState(false)
    const dispatch = useDispatch()

    console.log("EVENTS")
    console.log(events)

    const handleDateSelect = (selectInfo) => {
        console.log("SELECTINFO")
        console.log(selectInfo)
        const { start, end } = selectInfo;

        dispatch(
            openNewEventDialog({
                start,
                end,
            })
        );
    };

    const handleEventDrop = (eventDropInfo) => {
        // const { id, title, allDay, start, end, extendedProps } = eventDropInfo.event;
        // dispatch(
        //     updateEvent({
        //         id,
        //         title,
        //         allDay,
        //         start,
        //         end,
        //         extendedProps,
        //     })
        // );
    };
    const handleEventClick = (clickInfo) => {
        const { id, title, allDay, start, end, extendedProps } = clickInfo.event;
        let endDate = end == null ? start : end
        dispatch(
            openEditEventDialog({
                id,
                title,
                allDay,
                start,
                endDate,
                extendedProps,
            })
        );
    };

    const handleDates = (rangeInfo) => {
        // setCurrentDate(rangeInfo);
    };

    const handleEventAdd = (addInfo) => { };

    const handleEventChange = (changeInfo) => { };

    const handleEventRemove = (removeInfo) => { };

    useEffect(() => {
        ChangeRefresh(!refresh)
    }, []);

    return (
        <div style={{ height: 600 }} className="scheduled-meeting-container">
            <div className="red-border">
                <DialogTitle className="discussion-title">
                    <Typography
                        variant="h6"
                        className=" align-middle font-semibold"
                    >
                        Scheduled Meeting
                    </Typography>
                </DialogTitle>
                <DialogContent className="red-border chat-container discussion-content" classes={{ root: 'p-0' }}>
                    <FullCalendar
                        plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
                        headerToolbar={false}
                        initialView="timeGridWeek"
                        editable
                        selectable
                        selectMirror
                        dayMaxEvents
                        weekends
                        datesSet={handleDates}
                        select={handleDateSelect}
                        events={events}
                        eventContent={renderEventContent}
                        eventClick={handleEventClick}
                        eventAdd={handleEventAdd}
                        eventChange={handleEventChange}
                        eventRemove={handleEventRemove}
                        eventDrop={handleEventDrop}
                        initialDate={new Date()}
                        ref={calendarRef}
                    />
                </DialogContent>
            </div>
            <EventDialog />
        </div>
    );
}

export default ScheduledMeeting;

[ZeeshanAhmadKhalil]

The workaround to solve this issue is that you can set your default tab to that tab where you have a calendar and then change it to the first tab using setTimeout() in useEffect() as follows;

useEffect(() => {
    setTimeout(() => { //todo: workaround for calender not loading
      setTabValue(0)
    }, 10)
  }, [])

But this is bad approach as user will first see calender tab and then 1st tab while opening the tabs.

[acerix]

Please refer to the support page and use Stack Overflow for help. If this is a bug, please supply a runnable, stripped-down demonstration.