Topic: Navbar - disabled Dropdown item not working

Petr Urban priority asked 6 months ago


Dear MDB,

I would like to disable some of the Navbar items or if possible the whole Navbar in some cases - conditionally.

It is working fine for this kind of items:

<MDBNavbarItem :to="{name: 'consistencyChecks'}" data-cy="consistencyChecksMenu" disabled>
            CONSISTENCY CHECKS
</MDBNavbarItem>

But it is not working for Dropdowns e.g.

<MDBNavbarItem disabled>
    <MDBDropdown class="nav-item" v-model="processingDropdown" disabled="true">
            <MDBDropdownToggle tag="a"
                               class="nav-link"
                               @click="processingDropdown = !processingDropdown"
                               data-cy="testMenu">
              PROCESSING
            </MDBDropdownToggle>
            <MDBDropdownMenu aria-labelledby="processingDropdownButton">
              <MDBDropdownItem :to="{ name: 'chainProcessing' }" class="smart-nav">
                Spreadsheet
              </MDBDropdownItem>
              <MDBDropdownItem :to="{ name: 'batchProcessing' }" class="smart-nav">
                Directory
              </MDBDropdownItem>
              <MDBDropdownItem :to="{ name: 'scenarioProcessing' }" class="smart-nav">
                Scenario
              </MDBDropdownItem>
              <MDBDropdownItem :to="{ name: 'batchIdProcessing' }" class="smart-nav">
                Batch ID
              </MDBDropdownItem>
              <div class="dropdown-divider"></div>
              <MDBDropdownItem :to="{ name: smartStore.resultsToShow }" class="smart-nav">
                Results
              </MDBDropdownItem>
              <MDBDropdownItem :to="{ name: 'e2eResultsOverview' }" class="smart-nav">
                E2E Results
              </MDBDropdownItem>
            </MDBDropdownMenu>
          </MDBDropdown>
          </MDBNavbarItem>

the "smart-nav" class is the following: :deep(.smart-nav) { cursor: pointer; }

Is it possible disable the Dropdown somehow, please?

Thanks.

BR, Petr


Bartosz Cylwik staff answered 6 months ago


Hi! You want to disable the functionality of the dropdown right? You can do this in two ways:

1, By setting the pointer-events:none styles to the dropdown wrapper

  :style="{ 
          pointerEvents: disabled ? 'none' : 'auto',                
          }"  

2, Or by updating the toggle method that decides whether the dropdown should be opened or not

@click="!disabled && (dropdown1 = !dropdown1)"

I think though the second one may be better, because styles can be changed inside inspect tools by the users, allowing them to open the dropdown when they should not. You can also combine both of them If you wish.


You can checkout my snippet for this case here:

https://mdbootstrap.com/snippets/vue/b-cylwik/5911781#html-tab-view

Hope that helps!


Petr Urban priority commented 6 months ago

Yes, that's exactly what I want. Thank you very much!!



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

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 4.1.1
  • Device: macBook
  • Browser: chrome
  • OS: Mac OS Ventura 13.6.3
  • Provided sample code: No
  • Provided link: No