Select element inside dropdown menu issue

Question

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/

Answer 1

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