CODEWITHSUNDEEP
vue.jselement-ui
Yves Gonzaga
Yves Gonzaga

Reputation: 125

Select element inside dropdown menu issue

I am currently experimenting in Element UI a beautiful VueJS frame for ui. I am having issue when putting an select element inside a dropdown menu because when I select an item inside the select element it will close the dropdown also.

How should I make the dropdown stay whenever I select an item in select element?

Here is the sample demo. fiddle https://jsfiddle.net/vy70ogbz/

Upvotes: 0

Views: 5172

Answers (3)

Apar Adhikari
Apar Adhikari

Reputation: 821

You can prevent the dropdown from hiding.

Use the following code in your template

<el-dropdown ref="dropdown" trigger="click">
  <span class="el-dropdown-link">
    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>Action 1</el-dropdown-item>
    <el-dropdown-item>Action 2</el-dropdown-item>
    <el-dropdown-item>Action 3</el-dropdown-item>
    <el-dropdown-item>
      <el-select v-model="selectData" @change="handleChange">
        <el-option value="1">Option 1</el-option>
        <el-option value="2">Option 2</el-option>
        <el-option value="3">Option 3</el-option>
      </el-select>
    </el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

And this in your script

new Vue({
  data: {
    selectData: null
  },
  methods: {
    handleChange() {
      this.$nextTick(() => {
        this.$refs.dropdown.show();       
      });
    }
  }
}).$mount('#app')

Upvotes: 1

Joyful
Joyful

Reputation: 1249

I got the same problem and I solved it by small hack: when a dropdown is open I set disabled="true" property to the trigger button.

<el-button
    :disabled="dropdownIsOpen"
    slot="button"
>Open</el-button>

It works because in the source code we have condition for this case https://github.com/ElemeFE/element/blob/dev/packages/dropdown/src/dropdown.vue#L121

Example: click

Upvotes: 1

Lupyana Mbembati
Lupyana Mbembati

Reputation: 1836

Why dont you use a menu to achieve this. I find it is more flexible, you can use the menu-trigger="click" attribute to toggle the menu only when clicked. like this

 <el-menu
      :default-active="activeIndex"
      mode="horizontal"
      menu-trigger="click"
      @select="handleSelect">

      <el-submenu
        class="sub-menu-more">
        <template slot="title">
          <b>Click to dropdown</b>
        </template>
        <el-menu-item
          index="1">
          <span >Team</span>
        </el-menu-item>
        <el-menu-item
          index="2">
          <span >Product</span>
        </el-menu-item>
        <el-menu-item
          index="3">
          <span >item</span>
        </el-menu-item>
        <el-menu-item
          index="4">
         <el-select v-model="value" placeholder="Select">
        <el-option
         :label="'test1'"
         :value="'test1'">
        </el-option>
        <el-option
         :label="'test1'"
         :value="'test1'">
        </el-option>
        <el-option
          :label="'test1'"
          :value="'test1'">
        </el-option>
      </el-select>
        </el-menu-item>
      </el-submenu>
   </el-menu>

see fiddle

Upvotes: 1

Related Questions