CODEWITHSUNDEEP
javascriptvue.jsvue-material
AbhimanuSharma
AbhimanuSharma

Reputation: 453

Close form multi select on button click vuejs

I have html design of vue material multi select, where I want the multi select options to close on click of a button.

Here is my design enter image description here

I tried this:

methods: {
    selectAgents() {
        this.$refs.selectAgent.$el.children[0].click();
        this.$refs.selectAgent.$el.children[0].focus();
        this.$refs.selectAgent.$el.children[0].blur();
    }
}

None of this is worked.

<md-field>
    <label for="agents">Select user</label>
    <md-select v-model="selectedAgents" name="agents" id="agents" ref="selectAgent" multiple>
        <div class="add-user-outer">
            <div class="add-user-searchbox d-flex align-center">
                <md-icon class="brand-primary search">search</md-icon>
                <md-field md-inline>
                    <label>Search By Name</label>
                    <md-input v-model="agentSearchQuery"></md-input>
                </md-field>
                <md-button :md-ripple="false" class="md-primary" @click="selectAgents">
                    <md-icon>add</md-icon>
                    Add User
                </md-button>
            </div>
        </div>

        <md-option v-for="agent in resultAgents" :key="agent.id" :value="agent.id" class="share-dropdown">
            <md-avatar class="mr-2">
                <div v-if="!agent.image" class="md-avatar position-absolute md-intial">
                {{ agent.first_name.substring(0, 1).toUpperCase()
                }}{{ agent.last_name.substring(0, 1).toUpperCase() }}
                </div>
                <img v-else :src="`/images/users/`+agent.image" alt="Avatar" class="avatar-sidebar"/>
            </md-avatar>
            <div class="text-content">
                <h4 class="text-primary">{{agent.first_name}} {{agent.last_name}}</h4>
                <p class="description-normal text-description text-left font-weight-regular">
                    {{agent.email}}
                </p>
            </div>
        </md-option>
    </md-select>
</md-field>

Someone created a jsfiddle of the same with angular and I tried this too but not working with my vuejs.

https://jsfiddle.net/eo4th092/23/

Upvotes: 2

Views: 1066

Answers (2)

Alon Rosenfeld
Alon Rosenfeld

Reputation: 1469

It's possible by accessing $ref.deactivate(), Add to the html multiselect tag:

ref="multiselect"

and call it in your method:

this.$refs.multiselect.deactivate()

Also can be done to open/toggle

For full details on this PR read here

Upvotes: 1

MRX
MRX

Reputation: 1

Select user search Search By Name add Add User 

    <md-option v-for="agent in resultAgents" :key="agent.id" :value="agent.id" class="share-dropdown">
        <md-avatar class="mr-2">
            <div v-if="!agent.image" class="md-avatar position-absolute md-intial">
            {{ agent.first_name.substring(0, 1).toUpperCase()
            }}{{ agent.last_name.substring(0, 1).toUpperCase() }}
            </div>
            <img v-else :src="`/images/users/`+agent.image" alt="Avatar" class="avatar-sidebar"/>
        </md-avatar>
        <div class="text-content">
            <h4 class="text-primary">{{agent.first_name}} {{agent.last_name}}</h4>
            <p class="description-normal text-description text-left font-weight-regular">
                {{agent.email}}
            </p>
        </div>
    </md-option>
</md-select>

Upvotes: 0

Related Questions