diff --git a/src/components/navbar/navbar-toggle.js b/src/components/navbar/navbar-toggle.js index a34623f3609..35a44309ceb 100644 --- a/src/components/navbar/navbar-toggle.js +++ b/src/components/navbar/navbar-toggle.js @@ -23,6 +23,10 @@ export const BNavbarToggle = /*#__PURE__*/ Vue.extend({ target: { type: String, required: true + }, + disabled: { + type: Boolean, + default: false } }, data() { @@ -36,8 +40,10 @@ export const BNavbarToggle = /*#__PURE__*/ Vue.extend({ }, methods: { onClick(evt) { - // Emit courtesy `click` event - this.$emit('click', evt) + if (!this.disabled) { + // Emit courtesy `click` event + this.$emit('click', evt) + } }, handleStateEvt(id, state) { // We listen for state events so that we can pass the @@ -48,17 +54,23 @@ export const BNavbarToggle = /*#__PURE__*/ Vue.extend({ } }, render(h) { - const expanded = this.toggleState + const { disabled } = this + return h( 'button', { staticClass: CLASS_NAME, + class: { disabled }, directives: [{ name: 'BToggle', value: this.target }], - attrs: { type: 'button', 'aria-label': this.label }, + attrs: { + type: 'button', + disabled, + 'aria-label': this.label + }, on: { click: this.onClick } }, [ - this.normalizeSlot('default', { expanded }) || + this.normalizeSlot('default', { expanded: this.toggleState }) || h('span', { staticClass: `${CLASS_NAME}-icon` }) ] ) diff --git a/src/components/navbar/navbar-toggle.spec.js b/src/components/navbar/navbar-toggle.spec.js index 12b1098f92e..58d6cf03bb7 100644 --- a/src/components/navbar/navbar-toggle.spec.js +++ b/src/components/navbar/navbar-toggle.spec.js @@ -159,4 +159,22 @@ describe('navbar-toggle', () => { wrapper.destroy() }) + + it('disabled prop works', async () => { + const wrapper = mount(BNavbarToggle, { + propsData: { + target: 'target-9', + disabled: true + } + }) + + expect(wrapper.emitted('click')).not.toBeDefined() + expect(wrapper.element.hasAttribute('disabled')).toBe(true) + expect(wrapper.classes()).toContain('disabled') + + await wrapper.trigger('click') + expect(wrapper.emitted('click')).not.toBeDefined() + + wrapper.destroy() + }) }) diff --git a/src/components/navbar/package.json b/src/components/navbar/package.json index c36d5a1b466..8011b2a3fc4 100644 --- a/src/components/navbar/package.json +++ b/src/components/navbar/package.json @@ -78,6 +78,11 @@ "prop": "label", "settings": true, "description": "String to place in the toggle's 'aria-label' attribute" + }, + { + "prop": "disabled", + "version": "2.15.0", + "description": "When `true`, disables the navbar toggle button, and adds class `disabled` to the button" } ], "events": [