From f29a4304f9ed097927125cee0127864e11b87c03 Mon Sep 17 00:00:00 2001
From: kdeun1 <kdeun1@ex-em.com>
Date: Tue, 10 Nov 2020 11:36:29 +0900
Subject: [PATCH] =?UTF-8?q?[#646,=20#663][3.0]=20Select,=20DatePicker=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=93=9C=EB=9E=8D?=
 =?UTF-8?q?=EB=8B=A4=EC=9A=B4=20=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?(#705)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [#646] Select 컴포넌트 버그 수정 및 리펙토링
################
- Select 컴포넌트의 드랍박스의 스펙 변경
  - Vue3의 teleport 로직으로 인풋박스의 움직임을 감지하지못하여 dom nested 구조로 변경
  - 기본적으로 인풋박스 위치 아래로 드랍다운됨
  - 브라우저 높이 기준으로 드랍박스가 드랍다운되었을 때, 브라우저 영역을 벗어나는 경우는 인풋박스의 상단으로 드랍업되도록 로직 수정
  - 셀렉스 컴포넌트의 여러 기능으로 인하여 드랍박스의 위치가 변경되는 경우 nextTick 이후에 렌더링 위치를 재조정하는 로직 추가
- 컴포넌트 싱글, 멀티인 경우 레이아웃, css 개선
- 드랍박스의 리스트에 텍스트뿐만 아니라 아이콘이 위치할 수 있도록 기능 개선
- EVUI DOCS 설명 수정 및 아이콘 부분 추가

* [#663] DatePicker 컴포넌트 드랍다운로직 수정
################
- DatePicker 컴포넌트의 드랍박스의 스펙 변경
  - 기본적으로 인풋박스 위치 아래로 드랍다운됨
  - 브라우저 높이 기준으로 드랍박스가 드랍다운되었을 때, 브라우저 영역을 벗어나는 경우는 인풋박스의 상단으로 드랍업되도록 로직 수정
  - 셀렉스 컴포넌트의 여러 기능으로 인하여 드랍박스의 위치가 변경되는 경우 nextTick 이후에 렌더링 위치를 재조정하는 로직 추가
- 컴포넌트 레이아웃, css 개선
- CloseAll 시에 드랍박스 보이지 않게 로직 수정

* [#663] DatePicker 컴포넌트 드랍다운로직 수정
################
- DatePicker css stylelint order error 수정
---
 docs/views/select/api/select.md          |  12 +-
 docs/views/select/example/Default.vue    |  43 +++++
 src/components/datePicker/DatePicker.vue | 134 +++++++--------
 src/components/datePicker/uses.js        | 149 +++++++----------
 src/components/select/Select.vue         | 193 +++++++++++----------
 src/components/select/uses.js            | 204 ++++++++++-------------
 src/directives/clickoutside.js           |   2 +-
 src/style/components/input.scss          |   9 +-
 8 files changed, 370 insertions(+), 376 deletions(-)

diff --git a/docs/views/select/api/select.md b/docs/views/select/api/select.md
index d08813976..84fad8f55 100644
--- a/docs/views/select/api/select.md
+++ b/docs/views/select/api/select.md
@@ -1,7 +1,7 @@
 
 >### Desc
  - 태그는 &lt;ev-select&gt;(이하 <셀렉트>)로 정의
- - &lt;ev-select&gt; 클릭시 나타나는 영역은 dropdown box(이하 <드랍다운 박스>)로 정의
+ - &lt;ev-select&gt; 클릭시 나타나는 영역은 dropBox(이하 <드랍박스>)로 정의
 
 ```
 <ev-select
@@ -13,13 +13,13 @@
  - <셀렉트> 컴포넌트는 `<input type="text" />` 를 래핑하는 구조를 가지고 있다.
  - <셀렉트> 컴포넌트를 클릭하였을 때, :items 속성에 1개 이상의 객체를 가진 배열이 존재하는 경우,
    하단에 선택할 리스트 데이터를 보여주는 <드랍다운 박스>가 나타난다.
- - <드랍다운 박스>가 열린 상태에서 <셀렉트>를 한번더 클릭할 시 <드랍다운 박스>는 사라진다. 
- - <드랍다운 박스>는 Vue 3의 `<teleport />` 기능을 사용하여 `body` DOM에 렌더링시킨다.
-   이 기능은 애플리케이션 UI를 Vue 앱 외부의 DOM으로 이동시키지만, 코드를 <셀렉트> 컴포넌트에서
-   관리하기 위함이다. 
+ - <드랍박스>가 열린 상태에서 <셀렉트>를 한번더 클릭할 시 <드랍다운 박스>는 사라진다. 
  - <셀렉트> 컴포넌트의 기본 width는 100%이다.
    다른 형태를 위해서는 ev-select 클래스에 스타일을 래핑해야한다.
- - 기본적으로 <드랍다운 박스>의 너비는 <셀렉트> 컴포넌트의 너비와 동일하게 맞춰져 있다.
+ - 기본적으로 <드랍박스>의 너비는 <셀렉트> 컴포넌트의 너비와 동일하게 맞춰져 있다.
+ - items 바인딩 값의 타입은 배열이며, 속성으로는 name, value, cls 이다.
+ - cls속성의 값으로 <드랍박스>의 <li> 내 아이콘을 추가할 수 있다.
+ - <드랍박스>는 기본적으로 인풋박스의 하단에 드랍다운되며, 브라우저 높이에 맞춰 <드랍박스>가 아래로 위치하는 경우 브라우저 화면을 넘어가는 경우 상단에 드랍업 된다.
 
 >### Props
 1) 셀렉트 사용 시
diff --git a/docs/views/select/example/Default.vue b/docs/views/select/example/Default.vue
index 15b183ce9..4e26e1fdc 100644
--- a/docs/views/select/example/Default.vue
+++ b/docs/views/select/example/Default.vue
@@ -72,6 +72,18 @@
       filterable
     />
   </div>
+  <div class="case">
+    <p class="case-title">Icon</p>
+    <ev-select
+      v-model="selectVal5"
+      :items="items5"
+      placeholder="Please select value."
+      @change="changeSelect1"
+    />
+    <div class="description">
+      val : {{ selectVal5 }}
+    </div>
+  </div>
 </template>
 
 <script>
@@ -185,6 +197,34 @@ export default {
     const isDisabled = ref(true);
     const disableSelect = () => { isDisabled.value = !isDisabled.value; };
 
+    const selectVal5 = ref();
+    const items5 = ref([
+      {
+        name: 'name0',
+        value: 'value0',
+        cls: 'ev-icon-query',
+      },
+      {
+        name: 'name1',
+        value: 'value1',
+      },
+      {
+        name: 'name2',
+        value: 'value2',
+        cls: '',
+      },
+      {
+        name: 'name3',
+        value: 'value3',
+        cls: 'ev-icon-bell',
+      },
+      {
+        name: 'name4',
+        value: 'value4',
+        cls: 'ev-icon-close2',
+      },
+    ]);
+
     return {
       selectVal1,
       items1,
@@ -200,6 +240,9 @@ export default {
       items4,
       isDisabled,
       disableSelect,
+
+      selectVal5,
+      items5,
     };
   },
 };
diff --git a/src/components/datePicker/DatePicker.vue b/src/components/datePicker/DatePicker.vue
index d19ba2f96..58ae12906 100644
--- a/src/components/datePicker/DatePicker.vue
+++ b/src/components/datePicker/DatePicker.vue
@@ -6,32 +6,39 @@
     :class="{
       disabled,
     }"
-    @click="clickSelectInput"
   >
     <template v-if="mode === 'date' || mode === 'dateTime'">
+      <span class="ev-date-picker-prefix-icon">
+        <i class="ev-icon-calendar" />
+      </span>
       <input
         v-model.trim="currentValue"
         type="text"
         class="ev-input"
         :placeholder="placeholder"
         :disabled="disabled"
+        @click="clickSelectInput"
         @keydown.enter.prevent="validateValue(currentValue)"
         @change="validateValue(currentValue)"
       />
     </template>
     <template v-else>
-      <input
-        type="text"
-        class="ev-input readonly"
-        readonly
-        :placeholder="placeholder"
-        :disabled="disabled"
-      />
-      <template
-        v-if="mode === 'dateMulti'
+      <div class="ev-date-picker-tag-wrapper">
+        <span class="ev-date-picker-prefix-icon">
+          <i class="ev-icon-calendar" />
+        </span>
+        <input
+          type="text"
+          class="ev-input readonly"
+          readonly
+          :placeholder="placeholder"
+          :disabled="disabled"
+          @click="clickSelectInput"
+        />
+        <template
+          v-if="mode === 'dateMulti'
           && (options.multiType === 'date' || !options.tagShorten)"
-      >
-        <div class="ev-select-tag-wrapper">
+        >
           <div
             v-for="(item, idx) in mv"
             :key="`${item}_${idx}`"
@@ -42,18 +49,13 @@
             <span
               v-if="options.multiType === 'date'"
               class="ev-tag-suffix"
-              @click.stop="removeMv(item)"
+              @click.stop="[removeMv(item), changeDropboxPosition()]"
             >
-              <i class="ev-tag-suffix-close ev-icon-error" />
-            </span>
+            <i class="ev-tag-suffix-close ev-icon-error" />
+          </span>
           </div>
-        </div>
-      </template>
-      <template v-else>
-        <div
-          v-show="mv[0] && mv[mv.length - 1]"
-          class="ev-select-tag-wrapper"
-        >
+        </template>
+        <template v-else-if="mv[0] && mv[mv.length - 1]">
           <div class="ev-select-tag num">
             <span class="ev-tag-name"> {{ mv[0] }} </span>
           </div>
@@ -63,45 +65,42 @@
           <div class="ev-select-tag num">
             <span class="ev-tag-name"> {{ mv[mv.length - 1] }} </span>
           </div>
-        </div>
-      </template>
+        </template>
+      </div>
     </template>
-    <span class="ev-date-picker-prefix-icon">
-      <i class="ev-icon-calendar" />
-    </span>
     <template v-if="clearable">
       <span
         v-show="isClearableIcon"
         class="ev-input-suffix"
-        @click.stop="removeAllMv"
+        @click.stop="[removeAllMv(), clickOutsideDropbox()]"
       >
         <i class="ev-icon-error" />
       </span>
     </template>
-  </div>
-
-  <teleport to="#ev-date-picker-dropdown-modal">
-    <div
-      v-if="isDropbox"
-      class="ev-date-picker-dropdown"
-      :class="mode"
-      :style="dropdownStyle"
-    >
-      <ev-calendar
-        key="fromCalendar"
-        v-model="mv"
-        :mode="mode"
-        :month-notation="monthNotation"
-        :day-of-the-week-notation="dayOfTheWeekNotation"
-        :options="options"
-      />
+    <div class="ev-date-picker-dropbox-wrapper">
+      <div
+        v-if="isDropbox"
+        ref="dropbox"
+        class="ev-date-picker-dropdown"
+        :class="mode"
+        :style="dropboxPosition"
+      >
+        <ev-calendar
+          key="fromCalendar"
+          v-model="mv"
+          :mode="mode"
+          :month-notation="monthNotation"
+          :day-of-the-week-notation="dayOfTheWeekNotation"
+          :options="options"
+        />
+      </div>
     </div>
-  </teleport>
+  </div>
 </template>
 
 <script>
 import { datePickerClickoutside as clickoutside } from '@/directives/clickoutside';
-import { useModel, useDropdown, usePosition } from './uses';
+import { useModel, useDropdown } from './uses';
 
 export default {
   name: 'EvDatePicker',
@@ -175,7 +174,6 @@ export default {
     const {
       mv,
       currentValue,
-      isDropbox,
       isClearableIcon,
       validateValue,
       removeAllMv,
@@ -184,26 +182,18 @@ export default {
     } = useModel();
 
     const {
+      isDropbox,
+      datePicker,
+      dropbox,
+      itemWrapper,
+      dropboxPosition,
       clickSelectInput,
       clickOutsideDropbox,
+      changeDropboxPosition,
     } = useDropdown({
-      isDropbox,
       currentValue,
     });
 
-    const {
-      datePicker,
-      itemWrapper,
-      dropdownStyle,
-      createDropdownEl,
-      observeDropbox,
-    } = usePosition({
-      isDropbox,
-    });
-
-    createDropdownEl();
-    observeDropbox();
-
     return {
       mv,
       currentValue,
@@ -214,14 +204,13 @@ export default {
       removeMv,
 
       isDropbox,
-      clickSelectInput,
-      clickOutsideDropbox,
-
       datePicker,
+      dropbox,
       itemWrapper,
-      dropdownStyle,
-      createDropdownEl,
-      observeDropbox,
+      dropboxPosition,
+      clickSelectInput,
+      clickOutsideDropbox,
+      changeDropboxPosition,
     };
   },
 };
@@ -247,7 +236,6 @@ export default {
   .ev-input {
     $calendar-icon-width: 30px;
     position: absolute;
-    top: 0;
     left: 0;
     height: 100%;
     padding: 0 $input-default-padding 0 $calendar-icon-width;
@@ -266,12 +254,13 @@ export default {
     align-items: center;
     cursor: pointer;
 
+
     &:hover {
       color: #409EFF;
     }
   }
 
-  .ev-select-tag-wrapper {
+  .ev-date-picker-tag-wrapper {
     $select-height: 35px;
     display: flex;
     width: 100%;
@@ -339,4 +328,9 @@ export default {
     }
   }
 }
+
+.ev-date-picker-dropbox-wrapper {
+  height: 0;
+  z-index: 100;
+}
 </style>
diff --git a/src/components/datePicker/uses.js b/src/components/datePicker/uses.js
index d7451f1ca..7d9878cb0 100644
--- a/src/components/datePicker/uses.js
+++ b/src/components/datePicker/uses.js
@@ -1,13 +1,12 @@
 import {
   ref, reactive, computed, watch,
-  onMounted, onBeforeUnmount,
   nextTick, getCurrentInstance,
 } from 'vue';
 
 const dateReg = new RegExp(/[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])/);
 const dateTimeReg = new RegExp(/[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1]) (2[0-3]|[01][0-9]):[0-5][0-9]:[0-5][0-9]/);
 
-const useModel = () => {
+export const useModel = () => {
   const { props, emit } = getCurrentInstance();
 
   // Select 컴포넌트의 v-model 값
@@ -38,9 +37,6 @@ const useModel = () => {
     }
   };
 
-  // 드랍박스 존재 여부
-  const isDropbox = ref(false);
-
   // clearable 모드일 때, 항목(mv) 전체 삭제 아이콘 존재여부
   const isClearableIcon = computed(() => {
     if (props.mode === 'date' || props.mode === 'dateTime') {
@@ -58,7 +54,6 @@ const useModel = () => {
     } else {
       mv.value.splice(0);
       mv.value = [...mv.value];
-      isDropbox.value = false;
     }
   };
 
@@ -86,7 +81,6 @@ const useModel = () => {
   return {
     mv,
     currentValue,
-    isDropbox,
     isClearableIcon,
     validateValue,
     removeAllMv,
@@ -95,18 +89,68 @@ const useModel = () => {
   };
 };
 
-const useDropdown = (param) => {
+export const useDropdown = (param) => {
   const { props } = getCurrentInstance();
-  const { isDropbox, currentValue } = param;
+  const { currentValue } = param;
+
+  const isDropbox = ref(false);
+  const datePicker = ref(null);
+  const dropbox = ref(null);
+  const itemWrapper = ref(null);
+  const dropboxPosition = reactive({
+    top: null,
+    right: null,
+    left: null,
+  });
+
+  /**
+   * dropdown box 위치 변경하는 메소드
+   */
+  const changeDropboxPosition = async () => {
+    await nextTick();
+    const datePickerRect = datePicker.value?.getBoundingClientRect();
+    const dropboxRect = dropbox.value?.getBoundingClientRect();
+    const datePickerHeight = datePickerRect.height;
+    const datePickerY = datePickerRect.y;
+    const datePickerX = datePickerRect.x;
+    const dropboxHeight = dropboxRect.height;
+    const dropboxWidth = dropboxRect.width;
+    const docHeight = document.documentElement.clientHeight;
+    const docWidth = document.documentElement.clientWidth;
+    if (docHeight < datePickerY + datePickerHeight + dropboxHeight) {
+      // dropTop
+      dropboxPosition.top = `-${dropboxHeight}px`;
+      if (docWidth < datePickerX + dropboxWidth) {
+        dropboxPosition.left = 'auto';
+        dropboxPosition.right = '0px';
+      } else {
+        dropboxPosition.left = '0px';
+        dropboxPosition.right = 'auto';
+      }
+    } else {
+      // dropDown
+      dropboxPosition.top = `${datePickerHeight}px`;
+      if (docWidth < datePickerX + dropboxWidth) {
+        dropboxPosition.left = 'auto';
+        dropboxPosition.right = '0px';
+      } else {
+        dropboxPosition.left = '0px';
+        dropboxPosition.right = 'auto';
+      }
+    }
+  };
 
   /**
    * 인풋박스 클릭 이벤트
    * props로 받는 항목이 없는 경우 return처리
    * 인풋박스 위 클릭된 이벤트위치로 드롭박스의 사이즈, 위치를 계산
    */
-  const clickSelectInput = () => {
+  const clickSelectInput = async () => {
     if (!props.disabled) {
       isDropbox.value = !isDropbox.value;
+      if (isDropbox.value) {
+        await changeDropboxPosition();
+      }
     }
   };
 
@@ -138,87 +182,12 @@ const useDropdown = (param) => {
 
   return {
     isDropbox,
-    clickSelectInput,
-    clickOutsideDropbox,
-  };
-};
-
-const usePosition = (param) => {
-  const { isDropbox } = param;
-
-  const datePicker = ref(null);
-  const itemWrapper = ref(null);
-  const dropboxPosition = reactive({
-    top: 0,
-    left: 0,
-  });
-
-  /**
-   * dropdown box가 나타날 때의 position style
-   */
-  const dropdownStyle = computed(() => ({
-    top: `${dropboxPosition.top}px`,
-    left: `${dropboxPosition.left}px`,
-  }));
-
-  /**
-   * 해당 컴포넌트 setup() 초기에 modal을 body에 append함.
-   * dropdown의 teleport to=":id"의 DOM을 미리 구성하기 위함.
-   */
-  const createDropdownEl = () => {
-    const DROPDOWN_CLS = 'ev-date-picker-dropdown-modal';
-    const targetEl = document.getElementById(DROPDOWN_CLS);
-    if (!document.body.contains(targetEl)) {
-      const dropdownEl = document.createElement('div');
-      dropdownEl.setAttribute('id', DROPDOWN_CLS);
-      document.body.appendChild(dropdownEl);
-    }
-  };
-
-  /**
-   * dropdown box 위치 변경하는 메소드
-   */
-  const changeDropboxPosition = () => {
-    if (isDropbox.value) {
-      const targetRect = datePicker.value.getBoundingClientRect();
-      dropboxPosition.top = window.pageYOffset + targetRect.top + targetRect.height;
-      dropboxPosition.left = window.pageXOffset + targetRect.left;
-    }
-  };
-
-  /**
-   * dropdown box의 위치를 감지하는 메소드
-   * 마운트, 비포마운트 훅에서 resize이벤트로 드랍다운박스의 포지션을 변경함
-   */
-  const observeDropbox = () => {
-    onMounted(() => {
-      window.addEventListener('resize', changeDropboxPosition);
-    });
-    onBeforeUnmount(() => {
-      window.removeEventListener('resize', changeDropboxPosition);
-    });
-  };
-
-  watch(
-    () => isDropbox.value,
-    (cur) => {
-      if (cur) {
-        changeDropboxPosition();
-      }
-    },
-  );
-
-  return {
     datePicker,
+    dropbox,
     itemWrapper,
-    dropdownStyle,
-    createDropdownEl,
-    observeDropbox,
+    dropboxPosition,
+    clickSelectInput,
+    clickOutsideDropbox,
+    changeDropboxPosition,
   };
 };
-
-export {
-  useModel,
-  useDropdown,
-  usePosition,
-};
diff --git a/src/components/select/Select.vue b/src/components/select/Select.vue
index 29f89096f..d8f3903af 100644
--- a/src/components/select/Select.vue
+++ b/src/components/select/Select.vue
@@ -1,46 +1,57 @@
 <template>
   <div
     ref="select"
+    v-clickoutside="clickOutsideDropbox"
     class="ev-select"
     :class="{
       selected: isDropbox,
       disabled,
     }"
-    @click.stop="clickSelectInput"
   >
-    <span
-      v-if="!clearable || !isClearableIcon"
-      class="ev-input-suffix"
-    >
-      <i
-        class="ev-input-suffix-arrow ev-icon-s-arrow-down"
-        :class="{
-          selected: isDropbox,
-        }"
-      />
-    </span>
     <template v-if="!multiple">
+      <span
+        v-if="!clearable || !isClearableIcon"
+        class="ev-input-suffix"
+      >
+        <i
+          class="ev-input-suffix-arrow ev-icon-s-arrow-down"
+          :class="{
+            selected: isDropbox,
+          }"
+        />
+      </span>
       <input
         v-model="selectedModel"
-        v-clickoutside="clickOutsideDropbox"
         type="text"
         class="ev-input"
         readonly
         :placeholder="computedPlaceholder"
         :disabled="disabled"
         @change="changeMv"
+        @click="clickSelectInput"
       />
     </template>
     <template v-else>
-      <input
-        v-clickoutside="clickOutsideDropbox"
-        type="text"
-        class="ev-input multiple"
-        readonly
-        :placeholder="computedPlaceholder"
-        :disabled="disabled"
-      />
       <div class="ev-select-tag-wrapper">
+        <span
+          v-if="!clearable || !isClearableIcon"
+          class="ev-input-suffix"
+        >
+          <i
+            class="ev-input-suffix-arrow ev-icon-s-arrow-down"
+            :class="{
+              selected: isDropbox,
+            }"
+          />
+        </span>
+        <input
+          type="text"
+          class="ev-input multiple"
+          readonly
+          :placeholder="computedPlaceholder"
+          :disabled="disabled"
+          @click="clickSelectInput"
+        />
         <template v-if="!collapseTags">
           <div
             v-for="item in selectedModel"
@@ -52,7 +63,7 @@
             </span>
             <span
               class="ev-tag-suffix"
-              @click.stop="removeMv(item.value)"
+              @click.stop="[removeMv(item.value), changeDropboxPosition()]"
             >
               <i class="ev-tag-suffix-close ev-icon-error" />
             </span>
@@ -68,7 +79,7 @@
             </span>
             <span
               class="ev-tag-suffix"
-              @click.stop="removeMv(selectedModel[0].value)"
+              @click.stop="[removeMv(selectedModel[0].value), changeDropboxPosition()]"
             >
               <i class="ev-tag-suffix-close ev-icon-error" />
             </span>
@@ -88,61 +99,65 @@
       <span
         v-show="isClearableIcon"
         class="ev-input-suffix"
-        @click.stop="removeAllMv"
+        @click.stop="[removeAllMv(), clickOutsideDropbox()]"
       >
         <i class="ev-icon-error" />
       </span>
     </template>
-  </div>
-
-  <teleport to="#ev-select-dropdown-modal">
-    <div
-      v-if="isDropbox"
-      class="ev-select-dropdown"
-      :style="dropdownStyle"
-    >
-      <input
-        v-if="filterable"
-        v-model="filterTextRef"
-        type="text"
-        class="ev-input-query"
-        :placeholder="searchPlaceholder"
-      />
+    <div class="ev-select-dropbox-wrapper">
       <div
-        ref="itemWrapper"
-        class="ev-select-dropdown-wrapper"
+        v-if="isDropbox"
+        ref="dropbox"
+        class="ev-select-dropbox"
+        :style="dropboxPosition"
       >
-        <ul
-          v-if="filteredItems.length"
-          class="ev-select-dropdown-ul"
+        <input
+          v-if="filterable"
+          v-model="filterTextRef"
+          type="text"
+          class="ev-input-query"
+          :placeholder="searchPlaceholder"
+        />
+        <div
+          ref="itemWrapper"
+          class="ev-select-dropbox-list"
         >
-          <li
-            v-for="(item, idx) in filteredItems"
-            :key="`${item.value}_${idx}`"
-            class="ev-select-dropdown-item"
-            :class="{
+          <ul
+            v-if="filteredItems.length"
+            class="ev-select-dropbox-ul"
+          >
+            <li
+              v-for="(item, idx) in filteredItems"
+              :key="`${item.value}_${idx}`"
+              class="ev-select-dropbox-item"
+              :class="{
               selected: selectedItemClass(item.value),
               disabled: item.disabled
             }"
-            :title="item.name"
-            @click.stop.prevent="clickItem(item.value)"
-          >
-            {{ item.name }}
-          </li>
-        </ul>
-        <ul v-else>
-          <li class="ev-select-dropdown-item disabled">
-            {{ noMatchingText }}
-          </li>
-        </ul>
+              :title="item.name"
+              @click.stop.prevent="[clickItem(item.value), changeDropboxPosition()]"
+            >
+              <i
+                v-if="item.cls"
+                :class="item.cls"
+              />
+              {{ item.name }}
+            </li>
+          </ul>
+          <ul v-else>
+            <li class="ev-select-dropbox-item disabled">
+              {{ noMatchingText }}
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
-  </teleport>
+  </div>
 </template>
 
 <script>
 import { selectClickoutside as clickoutside } from '@/directives/clickoutside';
-import { useModel, useDropdown, usePosition } from './uses';
+import { useModel, useDropdown } from './uses';
 
 export default {
   name: 'EvSelect',
@@ -206,51 +221,46 @@ export default {
       computedPlaceholder,
       isClearableIcon,
       changeMv,
-      removeAllMv,
       removeMv,
+      removeAllMv,
     } = useModel();
 
     const {
+      select,
+      dropbox,
+      itemWrapper,
       isDropbox,
+      dropboxPosition,
       filterTextRef,
       filteredItems,
       clickSelectInput,
       clickOutsideDropbox,
+      changeDropboxPosition,
       clickItem,
       selectedItemClass,
     } = useDropdown({ mv });
 
-    const {
-      select,
-      itemWrapper,
-      dropdownStyle,
-      createDropdownEl,
-      observeDropbox,
-    } = usePosition({ isDropbox, selectedModel });
-
-    createDropdownEl();
-    observeDropbox();
-
     return {
       mv,
       selectedModel,
       computedPlaceholder,
       isClearableIcon,
       changeMv,
-      removeAllMv,
       removeMv,
+      removeAllMv,
 
+      select,
+      dropbox,
+      itemWrapper,
       isDropbox,
+      dropboxPosition,
       filterTextRef,
       filteredItems,
       clickSelectInput,
       clickOutsideDropbox,
+      changeDropboxPosition,
       clickItem,
       selectedItemClass,
-
-      select,
-      itemWrapper,
-      dropdownStyle,
     };
   },
 };
@@ -276,13 +286,14 @@ export default {
 
   @import '../../style/components/input.scss';
   .ev-input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
     padding: 0 30px 0 15px;
     border: 1px solid #B2B2B2;
     cursor: pointer;
+
+    &.multiple {
+      position: absolute;
+      height: 100%;
+    }
   }
 
   .ev-input-suffix {
@@ -312,10 +323,11 @@ export default {
     display: flex;
     width: 100%;
     height: 100%;
+    padding: 3px 0;
     min-height: $select-height;
-    padding: 0 30px 0 0;
     flex-wrap: wrap;
     align-items: center;
+    z-index: 100;
   }
 }
 
@@ -353,11 +365,13 @@ export default {
   }
 }
 
-.ev-select-dropdown {
+.ev-select-dropbox-wrapper {
+  height: 0;
+}
+
+.ev-select-dropbox {
   $select-height: 35px;
   position: absolute;
-  top: 0;
-  left: 0;
   width: 100%;
   max-height: $select-height * 5;
   background-color: white;
@@ -365,7 +379,6 @@ export default {
   color: #606266;
   box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
   border-radius: 4px;
-  box-sizing: content-box;
   z-index: 100;
   cursor: pointer;
   overflow-x: hidden;
@@ -391,14 +404,14 @@ export default {
     background-color: transparent;
   }
 
-  .ev-select-dropdown-wrapper {
+  .ev-select-dropbox-list {
     width: 100%;
     max-height: $select-height * 4;
     overflow-y: auto;
   }
 }
 
-.ev-select-dropdown-item {
+.ev-select-dropbox-item {
   padding: 0 15px;
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/src/components/select/uses.js b/src/components/select/uses.js
index 327e211e4..9c85fd902 100644
--- a/src/components/select/uses.js
+++ b/src/components/select/uses.js
@@ -1,6 +1,5 @@
 import {
   ref, reactive, computed, watch,
-  onMounted, onBeforeUnmount,
   nextTick, getCurrentInstance,
 } from 'vue';
 
@@ -58,7 +57,16 @@ export const useModel = () => {
   /**
    * clearable모드일 때 [x] 아이콘 클릭 시 mv값을 초기화
    */
-  const removeAllMv = () => { mv.value = !props.multiple ? null : []; };
+  const removeAllMv = () => {
+    if (!props.disabled) {
+      if (!props.multiple) {
+        mv.value = null;
+      } else {
+        mv.value.splice(0);
+        mv.value = [...mv.value];
+      }
+    }
+  };
 
   /**
    * multiple 모드인 경우 선택된 value를 mv에서 삭제하는 로직
@@ -68,6 +76,7 @@ export const useModel = () => {
     if (!props.disabled) {
       const idx = mv.value.indexOf(val);
       mv.value.splice(idx, 1);
+      mv.value = [...mv.value];
     }
   };
 
@@ -93,10 +102,16 @@ export const useModel = () => {
 
 export const useDropdown = (param) => {
   const { props } = getCurrentInstance();
-  const mv = param.mv;
+  const { mv } = param;
 
   const isDropbox = ref(false);
   const filterTextRef = ref(props.filterText);
+  const select = ref(null);
+  const dropbox = ref(null);
+  const itemWrapper = ref(null);
+  const dropboxPosition = reactive({
+    top: 0,
+  });
 
   /**
    * filterable 모드 시 인풋박스에 입력된 텍스트가 포함된 목록 가져오기
@@ -111,14 +126,72 @@ export const useDropdown = (param) => {
     return props.items.filter(v => v.name.toUpperCase().includes(trimText.toUpperCase())) || [];
   });
 
+  /**
+   * dropdown box 위치 변경하는 메소드
+   */
+  const changeDropboxPosition = async () => {
+    await nextTick();
+    const selectHeight = select.value?.getBoundingClientRect().height;
+    const selectY = select.value?.getBoundingClientRect().y;
+    const dropboxHeight = dropbox.value?.getBoundingClientRect().height;
+    const docHeight = document.documentElement.clientHeight;
+    if (docHeight < selectY + selectHeight + dropboxHeight) {
+      dropboxPosition.top = `-${dropboxHeight}px`; // dropTop
+    } else {
+      dropboxPosition.top = `${selectHeight}px`; // dropDown
+    }
+  };
+
+  /**
+   * dropdown box 내 선택한 첫번째 아이템을 스크롤 가장 위로 올리는 메소드
+   */
+  const scrollToSelectedItem = () => {
+    if (!itemWrapper.value?.children[0]?.children?.length) {
+      return;
+    }
+    const SELECTED_CLS = 'selected';
+    const childEls = itemWrapper.value.children[0].children;
+    const wrapperOffsetTop = itemWrapper.value.offsetTop;
+    let childEl = null;
+    for (let i = 0; i < childEls.length; i++) {
+      childEl = childEls[i];
+      if (childEl.classList.contains(SELECTED_CLS)) {
+        if (!childEl.offsetTop) {
+          return;
+        }
+        itemWrapper.value.scrollTop = childEl.offsetTop - wrapperOffsetTop;
+        break;
+      }
+    }
+  };
+
+  watch(
+    () => isDropbox.value,
+    (cur) => {
+      if (cur) {
+        scrollToSelectedItem();
+      }
+    },
+  );
+
+  if (props.filterable) {
+    watch(
+      () => filteredItems.value,
+      () => changeDropboxPosition(),
+    );
+  }
+
   /**
    * 인풋박스 클릭 이벤트
    * props로 받는 항목이 없는 경우 return처리
    * 인풋박스 위 클릭된 이벤트위치로 드롭박스의 사이즈, 위치를 계산
    */
-  const clickSelectInput = () => {
+  const clickSelectInput = async () => {
     if (props.items.length && !props.disabled) {
       isDropbox.value = !isDropbox.value;
+      if (isDropbox.value) {
+        await changeDropboxPosition();
+      }
     }
   };
 
@@ -140,10 +213,16 @@ export const useDropdown = (param) => {
    * @param val - clicked item value
    */
   const singleClickItem = (val) => {
+    if (props.filterable) {
+      filterTextRef.value = '';
+    }
     mv.value = val;
     isDropbox.value = false;
   };
   const multipleClickItem = (val) => {
+    if (props.filterable) {
+      filterTextRef.value = '';
+    }
     if (!mv.value.includes(val)) {
       mv.value.push(val);
     } else {
@@ -163,124 +242,17 @@ export const useDropdown = (param) => {
   const selectedItemClass = !props.multiple ? singleSelectedCls : multipleSelectedCls;
 
   return {
+    select,
+    dropbox,
+    itemWrapper,
     isDropbox,
+    dropboxPosition,
     filterTextRef,
     filteredItems,
     clickSelectInput,
     clickOutsideDropbox,
+    changeDropboxPosition,
     clickItem,
     selectedItemClass,
   };
 };
-
-export const usePosition = (param) => {
-  const { props } = getCurrentInstance();
-  const isDropbox = param.isDropbox;
-  const selectedModel = param.selectedModel;
-
-  const select = ref(null);
-  const itemWrapper = ref(null);
-  const dropboxPosition = reactive({
-    top: 0,
-    left: 0,
-    width: 0,
-    height: 0,
-  });
-
-  /**
-   * dropdown box가 나타날 때의 position style
-   */
-  const dropdownStyle = computed(() => ({
-    top: `${dropboxPosition.top}px`,
-    left: `${dropboxPosition.left}px`,
-    width: `${dropboxPosition.width}px`,
-  }));
-
-  /**
-   * 해당 컴포넌트 setup() 초기에 modal을 body에 append함.
-   * dropdown의 teleport to=":id"의 DOM을 미리 구성하기 위함.
-   */
-  const createDropdownEl = () => {
-    const DROPDOWN_CLS = 'ev-select-dropdown-modal';
-    const targetEl = document.getElementById(DROPDOWN_CLS);
-    if (!document.body.contains(targetEl)) {
-      const dropdownEl = document.createElement('div');
-      dropdownEl.setAttribute('id', DROPDOWN_CLS);
-      document.body.appendChild(dropdownEl);
-    }
-  };
-
-  /**
-   * dropdown box 위치 변경하는 메소드
-   */
-  const changeDropboxPosition = () => {
-    if (isDropbox.value) {
-      const selectRect = select.value.getBoundingClientRect();
-      dropboxPosition.top = window.pageYOffset + selectRect.top + selectRect.height;
-      dropboxPosition.left = window.pageXOffset + selectRect.left;
-      dropboxPosition.width = selectRect.width;
-    }
-  };
-
-  /**
-   * dropdown box 내 선택한 첫번째 아이템을 스크롤 가장 위로 올리는 메소드
-   */
-  const scrollToSelectedItem = () => {
-    if (!itemWrapper.value?.children[0]?.children?.length) {
-      return;
-    }
-    const SELECTED_CLS = 'selected';
-    const childEls = itemWrapper.value.children[0].children;
-    const wrapperOffsetTop = itemWrapper.value.offsetTop;
-    let childEl = null;
-    for (let i = 0; i < childEls.length; i++) {
-      childEl = childEls[i];
-      if (childEl.classList.contains(SELECTED_CLS)) {
-        if (!childEl.offsetTop) {
-          return;
-        }
-        itemWrapper.value.scrollTop = childEl.offsetTop - wrapperOffsetTop;
-        break;
-      }
-    }
-  };
-
-  /**
-   * dropdown box의 위치를 감지하는 메소드
-   * 마운트, 비포마운트 훅에서 resize이벤트로 드랍다운박스의 포지션을 변경함
-   * multiple에서 선택된 아이템이 변경 시 selectRef의 높이가 변경될 수 있으므로 이를 감시함
-   */
-  const observeDropbox = () => {
-    onMounted(() => {
-      window.addEventListener('resize', changeDropboxPosition);
-    });
-    onBeforeUnmount(() => {
-      window.removeEventListener('resize', changeDropboxPosition);
-    });
-
-    watch(
-      () => isDropbox.value,
-      (cur) => {
-        if (cur) {
-          changeDropboxPosition();
-          scrollToSelectedItem();
-        }
-      },
-    );
-
-    if (props.multiple) {
-      watch(
-        () => selectedModel.value,
-        () => changeDropboxPosition(),
-      );
-    }
-  };
-
-  return {
-    select,
-    itemWrapper,
-    dropdownStyle,
-    createDropdownEl,
-    observeDropbox,
-  };
-};
diff --git a/src/directives/clickoutside.js b/src/directives/clickoutside.js
index 2a4d82065..2389f1a69 100644
--- a/src/directives/clickoutside.js
+++ b/src/directives/clickoutside.js
@@ -25,7 +25,7 @@ const selectClickoutside = {
     const componentEl = el;
     let dropLi = null;
     const bubble = binding.modifiers.bubble;
-    const selectDropbox = document.body.getElementsByClassName('ev-select-dropdown');
+    const selectDropbox = document.body.getElementsByClassName('ev-select-dropbox');
     const TAG_NAME_CLS = 'ev-tag-name';
     const TAG_SUFFIX_CLOSE_CLS = 'ev-tag-suffix-close';
     const handler = (e) => {
diff --git a/src/style/components/input.scss b/src/style/components/input.scss
index c465344e1..e3d6f5c58 100644
--- a/src/style/components/input.scss
+++ b/src/style/components/input.scss
@@ -28,7 +28,8 @@
 
 @include state('readonly') {
   .ev-input,
-  .ev-textarea {
+  .ev-textarea,
+  .ev-select {
     @include evThemify() {
       background-color: evThemed('background-lighten');
     }
@@ -40,7 +41,8 @@
     }
   }
   &.ev-text-field:hover,
-  &.ev-input-number:hover {
+  &.ev-input-number:hover,
+  &.ev-select:hover {
     .ev-input,
     .ev-textarea {
       @include evThemify() {
@@ -51,7 +53,8 @@
 }
 @include state('disabled') {
   &.ev-input-number,
-  &.ev-text-field {
+  &.ev-text-field,
+  &.ev-select {
     &, * {
       cursor: not-allowed !important;
     }