Search code examples
javascriptvue.jsdropdownbootstrap-vue

Disable main split button in dropdown bootstrap-vue

I'm trying to disable the main split button from a bootstrap-vue dropdown but keep the dropdown group enabled

This is the most basic sample code from the docs:

<div>
  <b-dropdown split text="Split Dropdown" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here...</b-dropdown-item>
  </b-dropdown>
</div>

By setting :disabled="true" in <b-dropdown> disables the whole button and I'm not able to expand the other options.

Using the slot button-content ignores the disabled property which makes sense because I'm overwriting the content and not the button itself.

<template slot="button-content" :disabled="true">Split Dropdown</template>

Is there a way to achieve this?

Solution

  • As suggested in this discussion, there is an easier way to achieve this with no extra code.

    <b-button-group>
  <b-button disabled>Split dropdown</b-button>
  <b-dropdown>
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here...</b-dropdown-item>
  </b-dropdown>
</b-button-group>