Add `toggleAttrs` prop to `GlDropdown`
Bootstrap Vue does not support adding attributes to the dropdown toggle button. This can prove difficult when writing E2E tests because a data-qa-selector
attribute can not be easily added.
There are two workarounds:
mounted() {
const dropdownToggle = this.$refs.glDropdown.$el.querySelector('.dropdown-toggle');
if (dropdownToggle) {
dropdownToggle.setAttribute('data-qa-selector', 'example_dropdown');
}
},
<slot #button-content>
<span class="gl-new-dropdown-button-text">{{
buttonText
}}</span>
<gl-icon
class="gl-button-icon dropdown-chevron"
name="chevron-down"
aria-hidden="true"
/>
</slot>
This isn't ideal because we override a lot of logic in the GlDropdown
component.
Instead of using the workarounds it would be nice to come up with a clean solution to implement in the GlDropdown
component and then expose that via the toggleAttrs
prop.