[Question] prevent selecting input

[xxRockOnxx]

If I would like to have a custom template that look like this:

How do I prevent it from being selected?

:close-on-select=false is a start.

I can just make a workaround and remove the css styling for the options but wondering if it's possible doing in JS

EDIT

<template slot="option" scope="props">
    <div style="display: flex; align-items: center;">
        <div style="margin-right: auto;">@{{ props.option.name }}</div>
        <div style="margin-left: auto;" class="btn-group" @click.stop>
            <button type="button" class="btn btn-sm btn-secondary">Show</button>
            <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="sr-only">Toggle Dropdown</span>
            </button>
            <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Invoice</a>
            <a href="#" class="dropdown-item">Print Label</a>
            <a  class="dropdown-item">Email</a>
            <a href="#" class="dropdown-item">Edit</a>
            </div>
        </div>
    </div>
</template>

Adding @click.stop on .dropdown-toggle prevent the option from being selected but clicking on the caret closes the multiselect

Edit

Tried Vue-based Bootstrap libraries like bootstrap-vue but I think this is something internal related. The component closes when clicking any element that is not an option

[shentao]

This should be possible with the 3.0 release and it’s refactor of the event system.