Topic: MDBDropdown 4.2.0 refactors are probelmatic
In the new release, there are multiple issues with drop down that I've faced.
First, if the MDBDropdownItem does not have the link property, it's not shown in the drop down list and if I add the link property, then React nags about DOM invalidity by having nested a tags which is problematic because I have to use the router provided by InertiaJS in order to navigate around.
Example:
<MDBSideNavItem link>
<Link href={route('dashboard.users.index')}>
<MDBIcon icon="users" className="me-3" fas fixed /> Users
</Link>
</MDBSideNavItem>
This will result in something like this which is no good:
<li>
<a>
<a href="dashboard/users/index">Users</a>
</a>
</li>
Second, I can't perform any logic inside the MDBDropdownMenu component because as soon as it's opened, I get this error: Uncaught TypeError: e is null
Example:
<MDBDropdownMenu>
{showProfile && <MDBDropdownItem link href="dashboard/profile">Profile</MDBDropdownItem>}
</<MDBDropdownMenu>
I have tested this with just a simple console.log() inside the component too, and it still gives me the same error so I don't think this is related to my own code.
For anyone in the future that stumbles upon this issue this is the fix. In this version of MDBReact, inside of the MDBDropdownMenu component should there be an expression that would result in null or false, you will be greeted with the e is null error.
Example:
<MDBDropdownMenu>
{someValue === true && (
<MDBDropdownItem link>
Test menu
</MDBDropdownItem>
)}
</MDBDropdownMenu>
The issue is that the result of this expression might be false therefore and empty statement will be returned and with the new refactors, this will yield in an error.
To fix this issue, simply return a Fragment element if the result of the expression is false:
<MDBDropdownMenu>
{someValue === true ? (
<MDBDropdownItem link>
Test menu
</MDBDropdownItem>
) : (
<></>
)}
</MDBDropdownMenu>
Hi!
To fix the first issue try doing something like this:
<MDBDropdownItem link childTag='span'>
<Link to='dashboard/users/index'>Users</Link>
</MDBDropdownItem>
The output would look like this which is correct:
<li>
<span>
<a href='dashboard/users/index'>Users</a>
</span>
</li>
I've tried recreating your second issue but I don't see any errors. In case it still exists please create a snippet (https://mdbootstrap.com/snippets/) so we can see exacly where the problem is.
clickstudioltd pro premium priority commented 2 years ago
For the first problem, the solution is good but not enough. If I do this, then my link won't take over all the space of the drop down row. Even if I add a d-block class to my link, there is still a padding for dropdown-item class which prevents my link to be stretched to take over all the row. With this refactoring, the only way for me is to override the dropdown-item class from CSS to get the desired result and that's not what I prefer.
For the second problem, your snippet maker only supports up to MDBReact version 4.0.0. Needless to say that this problem occurs only in 4.2.0.
Stanisław Jakubowski staff commented 2 years ago
Hi!
Unfortunately the first solution is the only one available for the moment. We will take a closer look at using our Dropdown with components from external libraries. For the second problem, please provide a github repository where this problem exists.
Keep coding!
clickstudioltd pro premium priority commented 2 years ago
I posted the answer on how to fix this problem. If it helps you to further improve this component so others wouldn't be baffled like me, please take a look at it.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 4.2.0
- Device: PC
- Browser: Mozilla Firefox
- OS: Windows 10
- Provided sample code: No
- Provided link: No