no way to add data-* attribute to OK button in modal

[sprocket99]

I am using cypress.io and decorating all the UI elements I need to interact with using data-* tags, which is the recommended way. Unfortunately I do not see a way of specifying such a tag on an modal dialog button, like OK (maybe I am missing something?). I know I could use a CSS selector like #__BVID__367___BV_modal_footer_ > .btn-primary but I rather not. I also know that I could probably make a slot for it, put my own OK button in there, and put a tag on that, again that is not convenient.

Please could you provide a way to specify in an easy way.

[tmorehouse]

You can provide your own modal footer containing your own button instances. The modal slots are scoped and giving access to the ok(), cancel() methods (for closing the modal, by adding @click="ok", etc on your buttons)

https://bootstrap-vue.js.org/docs/components/modal#custom-rendering-with-slots

[tmorehouse]

Example:

<b-modal ... >
  <template slot="footer" slot-scope="{ ok, cancel }">
    <b-button @click="cancel" variant="danger" data-foo="bar">Cancel</b-button>
    <b-button @click="ok" variant="primary" data-baz="buz">OK</b-button>
  </template>
  Modal message content here
</b-modal>

This gives you complete control over the attributes, style, etc of the buttons and any additional content you want in the footer.

Adding in additional support props for assigning arbitrary attributes (and the code to handle the prop), etc, will increase the <b-modal> code size, adding additional bloat. The scoped slots were designed for this very reason (the default content of buttons is provided for convenience).

You could take the above one step further if you use this often, by creating a helper component to render the buttons:

<b-modal ... >
  <my-modal-buttons slot="footer" slot-scope="scope" methods="scope" foo="baz" bar="buz">
  </my-modal-buttons>
  Modal message content here
</b-modal>

And define `my-modal-buttons" as:

<template>
  <div>
    <b-button @click="methods.cancel" variant="danger" :data-foo="foo">Cancel</b-button>
    <b-button @click="methods.ok" variant="primary" :data-baz="baz">OK</b-button>
  </div>
</template>

<script>
export default {
  name: 'MyModalButtons',
  props: {
    methods: { type: Object, default: () => ({}) },
    foo: { type: String },
    baz: { type: String }
  }
}
</script>

[vesper8]

@tmorehouse you recently made changes where previously one could add custom attributes such as data- attributes to many of the elements and now all of a sudden those are ignored.. It really broke my app in many ways (I too was using data-cy for cypress testing) and is requiring a lot of workarounds

I wish you just simply allowed custom data- attributes to be added on ALL your components

[tmorehouse]

@vesper8 I'm not sure what you mean... You can on any component add custom attributes on the rendered root element. All attributes are transferred to the root element of the component.

<b-xxxxx data-foo="bar"></b-xxxxx> will render data-foo="bar" onto the components root element.

Can you provide an example of which components you are referring to?