Search code examples
javascriptvue.jselement-ui

Explicitly Close Dropdown Menu Utilizing Element-UI

I have a drop down menu in a Vue application utilizing ElementUI which I need to explicitly close after applying some logic.

Essentially the flow is:

  1. Page loads, user clicks on a name from the drop down - name value gets written to database
  2. User reloads page, clicks on a different name, gets a pop-up asking if they want to save the new name

At this point, if the user confirms their choice, the new name gets written to the database, but the drop down stays open. I need to add some logic to call after the user confirms their choice in step 2 to ensure that the drop down doesn't stay open.

<div class="part">
    <span class="for-label"> Employee: </span>
    <el-select v-model="dataValue.assignedUser" filterable :disabled="notClick" @change="handle">
      <el-option
        v-for="(user, userIndex) in assignedOption"
        :key="userIndex"
        :label="user.userName"
        :value="user.userEmail"
      />
    </el-select>
  </div>

If relevant this bug only started occurring after adding the "filterable" attribute to the el-select.

Solution

  • I don't know why it would stay open, but you should be able to close it by calling its blur function.

    add ref to the select and call the following when it should close.

    this.$refs.select.blur()