Links inside Sidebar after click have no active color

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I’m reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

The links should have the active colors set from the Right Menu (FixedPlugin) after pressing one of them.

Current Behavior

When clicking the links in the Left Menu (Sidebar) component, the active color disappears.

Failure Information (for bugs)

This happens due to the focus css prop.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. Go on the live preview: https://demos.creative-tim.com/material-dashboard-react/#/admin/dashboard
2. Click on any of the links inside the Left Menu (Sidebar component)
3. Without any further clicking, or defocusing from the clicked link, move the cursor away
4. Notice how the link remains with no background color

Context

Unrelevant

Failure Logs

This happens due to the focus css prop.

Solution

1. Go inside src/assets/jss/material-dashboard-react/components/sidebarStyle.jsx
2. Change lines 191, 206, 228, 250 and 272 from "&:hover": { to "&:hover,&:focus": {

Best, Manu

[Samriddhi25]

Thanks a lot @EINazare it worked!

[einazare]

Please try this code:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";

// core components
import Admin from "layouts/Admin.js";
import RTL from "layouts/RTL.js";

import "assets/css/material-dashboard-react.css?v=1.9.0";

ReactDOM.render(
  <BrowserRouter>
    <Switch>
      <Route path="/admin" component={Admin} />
      <Route path="/rtl" component={RTL} />
      <Redirect from="/" to="/admin/dashboard" />
    </Switch>
  </BrowserRouter>,
  document.getElementById("root")
);

I’ve seen recently that sometimes, the combination of history & react-router-dom fails.