diff --git a/src/components/button/button.js b/src/components/button/button.js index 9f34561c055..04f02ca6672 100644 --- a/src/components/button/button.js +++ b/src/components/button/button.js @@ -26,6 +26,10 @@ const btnProps = { type: String, default: 'button' }, + tag: { + type: String, + default: 'button' + }, pressed: { // tri-state prop: true, false or null // => on, off, not a toggle @@ -55,6 +59,7 @@ export default { render (h, { props, data, listeners, children }) { const isLink = Boolean(props.href || props.to) const isToggle = typeof props.pressed === 'boolean' + const isButtonTag = props.tag === 'button' const on = { click (e) { if (props.disabled && e instanceof Event) { @@ -90,8 +95,8 @@ export default { ], props: isLink ? pluckProps(linkPropKeys, props) : null, attrs: { - type: isLink ? null : props.type, - disabled: isLink ? null : props.disabled, + type: isButtonTag && !isLink ? props.type : null, + disabled: isButtonTag && !isLink ? props.disabled : null, // Data attribute not used for js logic, // but only for BS4 style selectors. 'data-toggle': isToggle ? 'button' : null, @@ -107,6 +112,6 @@ export default { on } - return h(isLink ? Link : 'button', mergeData(data, componentData), children) + return h(isLink ? Link : props.tag, mergeData(data, componentData), children) } } diff --git a/src/components/button/button.spec.js b/src/components/button/button.spec.js index 54c22ad4d6a..d631ea34fcc 100755 --- a/src/components/button/button.spec.js +++ b/src/components/button/button.spec.js @@ -55,6 +55,20 @@ describe('button', async () => { expect(btnRootNode.href).toBe('https://github.com/bootstrap-vue/bootstrap-vue') }) + it('should use the given tag', async () => { + const { app: { $refs } } = window + const btnRootNode = $refs.btn_div + + expect(btnRootNode).toBeElement('div') + }) + + it('should use button when no tag is given', async () => { + const { app: { $refs } } = window + const btnRootNode = $refs.btn_no_tag + + expect(btnRootNode).toBeElement('button') + }) + it('should emit "click" event when clicked', async () => { const { app: { $refs } } = window const btn = $refs.btn_click diff --git a/src/components/button/fixtures/button.html b/src/components/button/fixtures/button.html index 4a9d160faf6..971755303ea 100755 --- a/src/components/button/fixtures/button.html +++ b/src/components/button/fixtures/button.html @@ -24,6 +24,19 @@ alt="github"> +
+ + I am a div + +
+
+ + I am a button + +
{ expect(dd_1).not.toHaveClass('position-static') }) */ + + it('should have a toggle with the given toggle tag', async () => { + const { app: { $refs } } = window + const { dd_10 } = $refs // eslint-disable-line camelcase + + const toggle = dd_10.$el.querySelector('.dropdown-toggle') + expect(toggle).toBeElement('div') + }) + it('dd-item should render as link by default', async () => { const {app: {$refs}} = window const {dd_6} = $refs // eslint-disable-line camelcase diff --git a/src/components/dropdown/fixtures/dropdown.html b/src/components/dropdown/fixtures/dropdown.html index 282bc799558..8a9c1b08617 100755 --- a/src/components/dropdown/fixtures/dropdown.html +++ b/src/components/dropdown/fixtures/dropdown.html @@ -90,4 +90,11 @@ Action Another action + +

+ + + Action + Another action +