React - UI Clicks are not responsive

Question

The problem is after certain changes(for example logout and login), clicks start to be less responsive or not responsive at all. This happens both in local and production. I have no idea why it happens and what may be causing this weird issue..

Before this issue occurs, I can click on checkbox multiple times or some click to change the photo etc.

After the issue, I can not click the checkbox repeatedly and I can not click to the photo to change.

Here is some the codes of the project:

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import * as serviceWorker from './serviceWorker';
import { createBrowserHistory } from 'history';
import configureStore from './store/configureStore';

// Create browser history to use in the Redux store
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href') as string;
export const history = createBrowserHistory({ basename: baseUrl });

const store = configureStore(history);

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

serviceWorker.unregister();

App.tsx

import React, { useEffect } from 'react';
import './App.css';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { DndProvider } from 'react-dnd';

import { ConnectedRouter } from 'connected-react-router';
import Routes from './routes/Routes';
import { history } from './store';
import Layout from './components/main/Layout';
import ToastrNotification from './components/shared/ToastrNotification';
import { localizationConfig } from './config/localizationConfig';

function App() {
    localizationConfig();
    return (
        <DndProvider backend={HTML5Backend}>
            <ConnectedRouter history={history}>
                <Layout>
                    <ToastrNotification />
                    <Routes />
                </Layout>
            </ConnectedRouter>
        </DndProvider>
    );
}

export default App;

package.json

{
    "name": "xxx",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@date-io/date-fns": "^1.3.13",
        "@date-io/moment": "^2.11.0",
        "@material-ui/core": "^4.11.3",
        "@material-ui/icons": "^4.11.2",
        "@material-ui/lab": "^4.0.0-alpha.57",
        "@material-ui/pickers": "^3.3.10",
        "@reduxjs/toolkit": "^1.5.0",
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.5.0",
        "@testing-library/user-event": "^7.2.1",
        "@types/jest": "^24.9.1",
        "@types/node": "^12.20.4",
        "@types/react": "^16.14.4",
        "@types/react-dnd": "^3.0.2",
        "@types/react-dom": "^16.9.11",
        "@types/react-highlight-words": "^0.16.3",
        "@types/react-redux": "^7.1.16",
        "axios": "^0.21.1",
        "bson-objectid": "^2.0.1",
        "chart.js": "^3.6.2",
        "connected-react-router": "^6.9.1",
        "date-fns": "^2.24.0",
        "faker": "^5.5.3",
        "formik": "^2.2.6",
        "formik-material-ui": "^3.0.1",
        "formik-material-ui-pickers": "0.0.12",
        "history": "^4.10.1",
        "html2canvas": "^1.3.3",
        "i18n-js": "^3.8.0",
        "iban": "^0.0.14",
        "material-ui-popup-state": "^1.8.0",
        "moment": "^2.29.1",
        "oidc-client": "^1.11.5",
        "qrcode.react": "^1.0.1",
        "react": "^17.0.1",
        "react-chartjs-2": "^4.0.0",
        "react-datepicker": "^4.5.0",
        "react-dnd": "^15.1.1",
        "react-dnd-html5-backend": "^15.1.2",
        "react-dom": "^17.0.1",
        "react-highlight-words": "^0.17.0",
        "react-moment": "^1.1.1",
        "react-number-format": "^4.5.0",
        "react-oidc-client": "^1.0.13",
        "react-phone-number-input": "^3.1.38",
        "react-qrcode-logo": "^2.5.0",
        "react-redux": "^7.2.2",
        "react-router-dom": "^5.2.0",
        "react-scripts": "4.0.1",
        "react-spinners": "^0.10.6",
        "react-toastify": "^7.0.3",
        "redux-oidc": "^4.0.0-beta1",
        "redux-thunk": "^2.3.0",
        "typescript": "^3.9.9",
        "yup": "^0.32.9"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": "react-app"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "devDependencies": {
        "@types/i18n-js": "^3.8.0",
        "@types/react-datepicker": "^3.1.8",
        "@types/react-router-dom": "^5.1.7",
        "prettier": "2.3.0"
    }
}

Answer 1

Ok the answer is simple and weird.. We had some piece of code in some component, which added click EventListener to the body of the document.

After removing the e.preventDefault(), problem is solved..

useEffect(() => {
    document.body.addEventListener('click', (e) => handleClick(e));
    return () => {
        document.body.addEventListener('click', (e) => handleClick(e));
    };
}, []);



function handleClick(e: any) {
        e.stopPropagation();
        e.preventDefault();
        e.target.slot !== 'status-container' && isOpen() && setShowSelect(false);
    }