select: refactoring icon reverse (#12353)

* select: refactoring icon reverse

* select: disable clear icon when select popup is visible

* select: refactoring clear icon

packages/select/src/select.vue

@@ -94,10 +94,10 @@
       <template slot="prefix" v-if="$slots.prefix">
         <slot name="prefix"></slot>
       </template>
-      <i slot="suffix"
+      <template slot="suffix">
-       :class="['el-select__caret', 'el-input__icon', 'el-icon-' + iconClass]"
+        <i v-show="!showClose" :class="['el-select__caret', 'el-input__icon', 'el-icon-' + iconClass]"></i>
-       @click="handleIconClick"
+        <i v-if="showClose" class="el-select__caret el-input__icon el-icon-circle-close" @click="handleClearClick"></i>
-      ></i>
+      </template>
     </el-input>
     <transition
       name="el-zoom-in-top"
@@ -143,7 +143,6 @@
   import ElScrollbar from 'element-ui/packages/scrollbar';
   import debounce from 'throttle-debounce/debounce';
   import Clickoutside from 'element-ui/src/utils/clickoutside';
-  import { addClass, removeClass, hasClass } from 'element-ui/src/utils/dom';
   import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
   import { t } from 'element-ui/src/locale';
   import scrollIntoView from 'element-ui/src/utils/scroll-into-view';
@@ -186,7 +185,7 @@
         return !this.filterable || this.multiple || !isIE && !this.visible;
       },
 
-      iconClass() {
+      showClose() {
         let criteria = this.clearable &&
           !this.selectDisabled &&
           this.inputHovering &&
@@ -194,7 +193,11 @@
           this.value !== undefined &&
           this.value !== null &&
           this.value !== '';
-        return criteria ? 'circle-close is-show-close' : (this.remote && this.filterable ? '' : 'arrow-up');
+        return criteria;
+      },
+
+      iconClass() {
+        return this.remote && this.filterable ? '' : (this.visible ? 'arrow-up is-reverse' : 'arrow-up');
       },
 
       debounce() {
@@ -366,7 +369,6 @@
 
       visible(val) {
         if (!val) {
-          this.handleIconHide();
           this.broadcast('ElSelectDropdown', 'destroyPopper');
           if (this.$refs.input) {
             this.$refs.input.blur();
@@ -395,7 +397,6 @@
             }
           }
         } else {
-          this.handleIconShow();
           this.broadcast('ElSelectDropdown', 'updatePopper');
           if (this.filterable) {
             this.query = this.remote ? '' : this.selectedLabel;
@@ -479,20 +480,6 @@
         }
       },
 
-      handleIconHide() {
-        let icon = this.$el.querySelector('.el-input__icon');
-        if (icon) {
-          removeClass(icon, 'is-reverse');
-        }
-      },
-
-      handleIconShow() {
-        let icon = this.$el.querySelector('.el-input__icon');
-        if (icon && !hasClass(icon, 'el-icon-circle-close')) {
-          addClass(icon, 'is-reverse');
-        }
-      },
-
       scrollToOption(option) {
         const target = Array.isArray(option) && option[0] ? option[0].$el : option.$el;
         if (this.$refs.popper && target) {
@@ -594,10 +581,8 @@
         this.softFocus = false;
       },
 
-      handleIconClick(event) {
+      handleClearClick(event) {
-        if (this.iconClass.indexOf('circle-close') > -1) {
+        this.deleteSelected(event);
-          this.deleteSelected(event);
-        }
       },
 
       doDestroy() {

test/unit/specs/select.spec.js

@@ -285,9 +285,9 @@ describe('Select', () => {
     vm.value = '选项1';
     select.inputHovering = true;
     setTimeout(() => {
-      const icon = vm.$el.querySelector('.el-input__icon');
+      const iconClear = vm.$el.querySelector('.el-input__icon.el-icon-circle-close');
-      expect(icon.classList.contains('el-icon-circle-close')).to.true;
+      expect(iconClear).to.exist;
-      icon.click();
+      iconClear.click();
       expect(vm.value).to.equal('');
       done();
     }, 100);