MDBDropdown 4.2.0 refactors are probelmatic


Topic: MDBDropdown 4.2.0 refactors are probelmatic

clickstudioltd pro premium priority asked 2 years ago

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.


clickstudioltd pro premium priority answered 2 years ago

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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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