Modal Message Box Confirm HTML in Title

[joelhickok]

Thanks for adding the new beta modal plugin!! From what I am reading in the Docs, it is supported to pass the titleHtml property as an option to the this.$bvModal.msgBoxConfirm() service. However, it does not seem to be working to pass HTML to the titleHtml property as an option.

Code Example

const title = '<span class="text-info">Warning, This Is An HTML Title</span>';
const message = 'Some message...;
const response = await this.$bvModal.msgBoxConfirm(message, {
          titleHtml: title,
          noFade: true,
        });

Expected behavior

Expected to see the title parsed as HTML with the span element and class. Actually seeing the HTML passed directly to the title, as seen in the attached screenshot.

Versions

Libraries:

• BootstrapVue: 2.0.0-rc.22
• Bootstrap: 4.3.1
• Vue: 2.6.10

Environment:

• Device: Mac
• OS: Mojave 10.14.5
• Browser: Chrome
• Version: 75.0.3770.80

[tmorehouse]

Thanks for finding this... we should be able to get this fixed for the next rc release.

[tmorehouse]

As an interim workaround you can pass an array of vNodes like so:

const title = this.$createElement(
  'span',
  { class: ['text-info'] },
  'Warning, This Is An HTML Title'
);
const message = 'Some message...;
const response = await this.$bvModal.msgBoxConfirm(message, {
  title: [title], // must pass as an array
  noFade: true,
});

The message can also be passed as an array of vNode(s).

[joelhickok]

The vnode option is a great alternative, and will definitely be useful for more complex scenarios.

[tmorehouse]

It still wont be reactive (the vnodes are rendered only once, but does allow for more complex content.

[tmorehouse]

This was actually a bug with modal itself, not rendering the HTML correctly.

[joelhickok]

Looks like it's rendering just fine to pass the vNodes, but still getting a prop type error with the code block below. Thanks for the tip... working fine for now.

[Vue warn]: Invalid prop: type check failed for prop "titleHtml". Expected String with value "[object Object]", got Array

found in

---> <BMsgBox>
Etc...

Code Block:

const message = 'You are not logged in.  In order to edit, please login again to '
  + 'verify your access and then you will be redirected back to this page.';

const h = this.$createElement;

const vNodesTitle = h(
  'div',
  { class: ['d-flex', 'align-items-center'] },
  [
    h(
      'span',
      {
        'aria-hidden': ['true'],
        class: ['esri-icon', 'esri-icon-notice-round', 'mr-2'],
        style: { fontSize: '1.8rem' },
      },
    ),
    h(
      'span',
      'Warning, You Cannot Edit Right Now',
    ),
  ],
);

const response = await this.$bvModal.msgBoxConfirm(message, {
  titleHtml: [vNodesTitle],
  noFade: true,
  okTitle: 'Login Now To Edit',
  cancelTitle: 'Skip It, I Won\'t Edit Now',
});

[tmorehouse]

Oops.. that should have been title prop, not titleHtml (for passing vNodes). I have corrected my example above.

The title property gets converted to a named slot title via the msgBox code.

[joelhickok]

Switched to title but got same error. Still renders fine. I'll look for the fix in next rc.

[tmorehouse]

Will have a fix for the prop type check warning in the PR as well.

[helioelias]

Message not support html style?

[tmorehouse]

@helioelias no, as mentioned in the docs:

https://bootstrap-vue.js.org/docs/components/modal#message-box-notes

• The Message Box message currently does not support HTML strings, however, you can pass an array of VNodes as the message for fine grained control of the markup.