Navbar - disabled Dropdown item not working - Material Design for Bootstrap

Topic: Navbar - disabled Dropdown item not working

Petr Urban priority asked 9 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

Add comment

Bartosz Cylwik staff answered 9 months ago

0 0 Best answer

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

1, By setting the <code>pointer-events:none</code> styles to the dropdown wrapper

<pre class="prettyprint"><code> :style="{ 
 pointerEvents: disabled ? 'none' : 'auto', 
 }" 
</code></pre>

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

<pre class="prettyprint"><code>@click="!disabled && (dropdown1 = !dropdown1)"
</code></pre>

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.

<hr>

You can checkout my snippet for this case here:

<a href="https://mdbootstrap.com/snippets/vue/b-cylwik/5911781#html-tab-view" target="_blank">https://mdbootstrap.com/snippets/vue/b-cylwik/5911781#html-tab-view</a>

Hope that helps!

Please insert min. 20 characters.

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 9 months ago

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

Add comment