diff --git a/docs/pages/kselectinkmodal.vue b/docs/pages/kselectinkmodal.vue
new file mode 100644
index 000000000..4174300fb
--- /dev/null
+++ b/docs/pages/kselectinkmodal.vue
@@ -0,0 +1,75 @@
+<template>
+
+  <DocsPageTemplate>
+    <DocsPageSection title="Overview" anchor="#overview">
+      <DocsShow>
+        <KModal
+          :title="'KSelect inside KModal'"
+        >
+          <KSelect
+            v-model="exampleData"
+            :options="options"
+            label="Who are you?"
+            placeholder="Nobody"
+          />
+          <p>Value: {{ exampleData }}</p>
+        </KModal>
+      </DocsShow>
+    </DocsPageSection>
+  </DocsPageTemplate>
+
+</template>
+
+<script>
+
+  export default {
+    data() {
+      return {
+        exampleData: null,
+        options: [
+          {
+            label: 'Somebody',
+            value: 'somebody',
+          },
+          {
+            label: 'You used to know me',
+            value: 'usedto',
+          },
+          {
+            label: 'friend',
+            value: 'friend',
+          },
+          {
+            label: 'roman',
+            value: 'roman',
+          },
+          {
+            label: 'countryman',
+            value: 'countryman',
+          },
+          {
+            label: 'abraham lincoln',
+            value: 'lincoln',
+          },
+          {
+            label: 'albert einstein',
+            value: 'einstein',
+          },
+          {
+            label: 'bob barker',
+            value: 'barker',
+          },
+          {
+            label: 'billie jean',
+            value: 'billiejean',
+          },
+        ],
+      };
+    },
+  };
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/docs/tableOfContents.js b/docs/tableOfContents.js
index 96fe3ba3b..19d39b2cc 100644
--- a/docs/tableOfContents.js
+++ b/docs/tableOfContents.js
@@ -259,6 +259,11 @@ export default [
         isCode: true,
         keywords: ['field', 'box'],
       }),
+      new Page({
+        path: '/kselectinkmodal',
+        title: 'KSelectInKModal',
+        isCode: true,
+      }),
       new Page({
         path: '/kswitch',
         title: 'KSwitch',
diff --git a/lib/KSelect/KeenUiSelect.vue b/lib/KSelect/KeenUiSelect.vue
index b966eec45..f2af0d30c 100644
--- a/lib/KSelect/KeenUiSelect.vue
+++ b/lib/KSelect/KeenUiSelect.vue
@@ -1,182 +1,136 @@
 <template>
 
-  <!--
-   This component was forked from the Keen library in order to handle
-   dynamic styling.
-
-   The formatting has been changed to match our linters. We may eventually
-   want to simply consolidate it with our component and remove any unused
-   functionality.
-  -->
   <div class="ui-select" :class="classes">
     <input
       v-if="name"
-      class="ui-select-hidden-input"
-
+      class="ui-select__hidden-input"
       type="hidden"
       :name="name"
-
       :value="submittedValue"
     >
 
-    <div v-if="icon || $slots.icon" class="ui-select-icon-wrapper" :style="activeColorStyle">
+    <div v-if="icon || $slots.icon" class="ui-select__icon-wrapper">
       <slot name="icon">
-        <UiIcon :icon="icon" :style="activeColorStyle" />
+        <UiIcon :icon="icon" />
       </slot>
     </div>
 
-    <div class="ui-select-content">
+    <div class="ui-select__content">
       <div
         ref="label"
-        class="ui-select-label"
-        :class="$computedClass({ ':focus': $coreOutline })"
-        :tabindex="disabled ? null : '0'"
-
-        @click="toggleDropdown"
+        class="ui-select__label"
+        :tabindex="disabled ? null : tabindex || '0'"
         @focus="onFocus"
         @keydown.enter.prevent="openDropdown"
         @keydown.space.prevent="openDropdown"
         @keydown.tab="onBlur"
-        @keydown.up.prevent="highlightPreviousOption"
-        @keydown.down.prevent="highlightNextOption"
-        @keydown.self="highlightQuickMatch"
       >
-        <div
-          v-if="label || $slots.default"
-          class="ui-select-label-text"
-          :class="labelClasses"
-          :style="activeColorStyle"
-        >
+        <div v-if="label || $slots.default" class="ui-select__label-text" :class="labelClasses">
           <slot>{{ label }}</slot>
         </div>
 
-        <div class="ui-select-display" :style="activeBorderStyle">
-          <div
-            class="ui-select-display-value"
-            :class="{ 'is-placeholder': !hasDisplayText }"
-          >
-            <slot name="display">
-              {{ hasDisplayText ? displayText : (
-                hasFloatingLabel && isLabelInline) ? null : placeholder }}
-            </slot>
+        <div class="ui-select__display">
+          <div class="ui-select__display-value" :class="{ 'is-placeholder': !hasDisplayText }">
+            {{
+              hasDisplayText ? displayText : hasFloatingLabel && isLabelInline ? null : placeholder
+            }}
           </div>
 
-          <UiIcon v-if="!clearableState" class="ui-select-dropdown-button">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6.984 9.984h10.03L12 15z" /></svg>
+          <UiIcon class="ui-select__dropdown-button">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+              <path d="M6.984 9.984h10.03L12 15z" />
+            </svg>
           </UiIcon>
-          <KIconButton
-            v-else
-            class="overlay-close-button"
-            icon="close"
-            :ariaLabel="clearText"
-            :color="$themeTokens.text"
-            :tooltip="clearText"
-            @click.stop="setValue()"
-          />
         </div>
 
-        <transition name="ui-select-transition-fade">
+        <UiPopover
+          ref="dropdown"
+          class="ui-select__dropdown"
+          :close-on-scroll="false"
+          :constrain-to-scroll-parent="false"
+          :close-on-external-click="false"
+          :disabled="disabled"
+          @close="onClose"
+          @open="onOpen"
+          @reveal="onReveal"
+        >
           <div
-            v-show="showDropdown"
-            ref="dropdown"
-            class="ui-select-dropdown"
-            :style="{ color: $themeTokens.primary, backgroundColor: $themeTokens.surface, bottom: dropdownButtonBottom }"
+            ref="dropdownContent"
+            class="ui-select__dropdown-content"
             tabindex="-1"
-            @keydown.enter.prevent.stop="selectHighlighted"
-            @keydown.space.prevent.stop="selectHighlighted"
+            @keydown.down.prevent="highlightOption(highlightedIndex + 1)"
+            @keydown.enter.prevent.stop="selectHighlighted(highlightedIndex, $event)"
             @keydown.esc.prevent="closeDropdown()"
             @keydown.tab="onBlur"
-            @keydown.up.prevent.stop="highlightPreviousOption"
-            @keydown.down.prevent.stop="highlightNextOption"
-            @keydown.self="highlightQuickMatch"
+            @keydown.up.prevent="highlightOption(highlightedIndex - 1)"
           >
-            <div
-              v-if="hasSearch"
-
-              class="ui-select-search"
-              @click.stop
-
-              @keydown.space.stop
-            >
+            <div v-if="hasSearch" class="ui-select__search" @click.stop @keydown.space.stop>
               <input
                 ref="searchInput"
                 v-model="query"
                 autocomplete="off"
-                class="ui-select-search-input"
-
+                class="ui-select__search-input"
                 type="text"
-
                 :placeholder="searchPlaceholder"
               >
 
-              <UiIcon class="ui-select-search-icon">
+              <UiIcon class="ui-select__search-icon">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                   <path
-                    d="M9.516 14.016c2.484 0 4.5-2.016 4.5-4.5s-2.016-4.5-4.5-4.5-4.5 2.016-4.5
-                    4.5 2.016 4.5 4.5 4.5zm6 0l4.97
-                    4.97-1.5 1.5-4.97-4.97v-.797l-.28-.282c-1.126.984-2.626 1.547-4.22 1.547-3.61
-                    0-6.516-2.86-6.516-6.47S5.906 3 9.516 3s6.47 2.906 6.47 6.516c0 1.594-.564
-                    3.094-1.548 4.22l.28.28h.798z"
+                    d="M9.516 14.016c2.484 0 4.5-2.016 4.5-4.5s-2.016-4.5-4.5-4.5-4.5 2.016-4.5 4.5 2.016 4.5 4.5 4.5zm6 0l4.97 4.97-1.5 1.5-4.97-4.97v-.797l-.28-.282c-1.126.984-2.626 1.547-4.22 1.547-3.61 0-6.516-2.86-6.516-6.47S5.906 3 9.516 3s6.47 2.906 6.47 6.516c0 1.594-.564 3.094-1.548 4.22l.28.28h.798z"
                   />
                 </svg>
               </UiIcon>
 
-              <KCircularLoader
-                v-show="loading"
-                class="ui-select-search-progress"
+              <UiProgressCircular
+                v-if="loading"
+                class="ui-select__search-progress"
                 :size="20"
                 :stroke="4"
               />
             </div>
 
-            <ul
-              ref="optionsList"
-              class="ui-select-options"
-              :style="{ backgroundColor: $themeTokens.surface }"
-            >
-              <KeenUiSelectOption
+            <ul ref="optionsList" class="ui-select__options">
+              <UiSelectOption
                 v-for="(option, index) in filteredOptions"
                 ref="options"
                 :key="index"
-                :highlighted="isOptionHighlighted(option)"
+                :highlighted="highlightedIndex === index"
                 :keys="keys"
                 :multiple="multiple"
                 :option="option"
                 :selected="isOptionSelected(option)"
-
                 :type="type"
-                @click.native.stop="selectOption(option)"
-
-                @mouseover.native.stop="onMouseover(option)"
+                @click.stop="selectOption(option, index)"
+                @mouseover.stop="highlightOption(index, { autoScroll: false })"
               >
                 <slot
                   name="option"
-
-                  :highlighted="isOptionHighlighted(option)"
+                  :highlighted="highlightedIndex === index"
                   :index="index"
                   :option="option"
                   :selected="isOptionSelected(option)"
                 ></slot>
-              </KeenUiSelectOption>
+              </UiSelectOption>
 
-              <div v-show="hasNoResults" class="ui-select-no-results">
+              <div v-show="hasNoResults" class="ui-select__no-results">
                 <slot name="no-results">
-                  {{ noResultsText }}
+                  No results found
                 </slot>
               </div>
             </ul>
           </div>
-        </transition>
+        </UiPopover>
       </div>
 
-      <div v-if="hasFeedback" class="ui-select-feedback">
-        <div v-if="showError" class="ui-select-feedback-text">
+      <div v-if="hasFeedback" class="ui-select__feedback">
+        <div v-if="showError" class="ui-select__feedback-text">
           <slot name="error">
             {{ error }}
           </slot>
         </div>
 
-        <div v-else-if="showHelp" class="ui-select-feedback-text">
+        <div v-else-if="showHelp" class="ui-select__feedback-text">
           <slot name="help">
             {{ help }}
           </slot>
@@ -187,31 +141,31 @@
 
 </template>
 
-
 <script>
 
   import fuzzysearch from 'fuzzysearch';
-  import startswith from 'lodash/startsWith';
-  import sortby from 'lodash/sortBy';
-  import UiIcon from '../keen/UiIcon';
-
+  import UiIcon from '../keen/UiIcon.vue';
+  import UiPopover from '../keen/UiPopover.vue';
+  import UiProgressCircular from '../keen/UiProgressCircular.vue';
   import { looseIndexOf, looseEqual } from '../keen/helpers/util';
   import { scrollIntoView, resetScroll } from '../keen/helpers/element-scroll';
-  import config from '../keen/config';
-  import KeenUiSelectOption from './KeenUiSelectOption.vue';
+  import events from '../keen/helpers/events';
+  import UiSelectOption from './KeenUiSelectOption.vue';
 
   export default {
-    name: 'KeenUiSelect',
+    name: 'UiSelect',
+
     components: {
       UiIcon,
-      KeenUiSelectOption,
+      UiPopover,
+      UiProgressCircular,
+      UiSelectOption,
     },
+
     props: {
-      name: {
-        type: String,
-        default: null,
-      },
-      value: {
+      name: String,
+      tabindex: [String, Number],
+      modelValue: {
         type: [String, Number, Object, Array],
         required: true,
       },
@@ -221,22 +175,13 @@
           return [];
         },
       },
-      placeholder: {
-        type: String,
-        default: '',
-      },
-      icon: {
-        type: String,
-        default: null,
-      },
+      placeholder: String,
+      icon: String,
       iconPosition: {
         type: String,
         default: 'left', // 'left' or 'right'
       },
-      label: {
-        type: String,
-        default: null,
-      },
+      label: String,
       floatingLabel: {
         type: Boolean,
         default: false,
@@ -261,10 +206,7 @@
         type: String,
         default: 'Search',
       },
-      filter: {
-        type: Function,
-        default: null,
-      },
+      filter: Function,
       disableFilter: {
         type: Boolean,
         default: false,
@@ -277,63 +219,58 @@
         type: Boolean,
         default: false,
       },
-      noResultsText: {
-        type: String,
-        default: '',
-      },
       keys: {
         type: Object,
         default() {
-          return config.data.UiSelect.keys;
+          return {
+            class: 'class',
+            label: 'label',
+            value: 'value',
+            image: 'image',
+          };
         },
       },
       invalid: {
         type: Boolean,
         default: false,
       },
-      help: {
-        type: String,
-        default: null,
-      },
-      error: {
-        type: String,
-        default: null,
-      },
+      help: String,
+      error: String,
       disabled: {
         type: Boolean,
         default: false,
       },
-      clearable: {
-        type: Boolean,
-        default: false,
-      },
-      clearText: {
-        type: String,
-        default: '',
-      },
     },
 
+    emits: [
+      'external-click',
+      'update:modelValue',
+      'query-change',
+      'change',
+      'select',
+      'touch',
+      'focus',
+      'blur',
+      'dropdown-open',
+      'dropdown-close',
+    ],
+
     data() {
       return {
         query: '',
         isActive: false,
         isTouched: false,
-        highlightedOption: null,
-        showDropdown: false,
-        initialValue: JSON.stringify(this.value),
-        quickMatchString: '',
-        quickMatchTimeout: null,
-        scrollableAncestor: null,
-        dropdownButtonBottom: 'auto',
-        maxDropdownHeight: 256,
+        selectedIndex: -1,
+        highlightedIndex: -1,
+        initialValue: JSON.stringify(this.modelValue),
       };
     },
 
     computed: {
       classes() {
         return [
-          `ui-select-type-${this.type}`,
-          `ui-select-icon-position-${this.iconPosition}`,
+          `ui-select--type-${this.type}`,
+          `ui-select--icon-position-${this.iconPosition}`,
           { 'is-active': this.isActive },
           { 'is-invalid': this.invalid },
           { 'is-touched': this.isTouched },
@@ -360,11 +297,11 @@
       },
 
       isLabelInline() {
-        return this.value.length === 0 && !this.isActive;
+        return this.modelValue.length === 0 && !this.isActive;
       },
 
       hasFeedback() {
-        return Boolean(this.help) || Boolean(this.error) || Boolean(this.$slots.error);
+        return this.showError || this.showHelp;
       },
 
       showError() {
@@ -372,7 +309,7 @@
       },
 
       showHelp() {
-        return !this.showError && (Boolean(this.help) || Boolean(this.$slots.help));
+        return Boolean(this.help) || Boolean(this.$slots.help);
       },
 
       filteredOptions() {
@@ -380,19 +317,25 @@
           return this.options;
         }
 
-        return this.options.filter((option, index) => {
+        const options = this.options.filter(option => {
           if (this.filter) {
-            return this.filter(option, this.query);
+            return this.filter(option, this.query, this.defaultFilter);
           }
 
-          return this.defaultFilter(option, index);
+          return this.defaultFilter(option, this.query);
         });
+
+        if (this.sort) {
+          options.sort(this.sort.bind(this));
+        }
+
+        return options;
       },
 
       displayText() {
         if (this.multiple) {
-          if (this.value.length > 0) {
-            return this.value
+          if (this.modelValue.length > 0) {
+            return this.modelValue
               .map(value => value[this.keys.label] || value)
               .join(this.multipleDelimiter);
           }
@@ -400,7 +343,7 @@
           return '';
         }
 
-        return this.value ? this.value[this.keys.label] || this.value : '';
+        return this.modelValue ? this.modelValue[this.keys.label] || this.modelValue : '';
       },
 
       hasDisplayText() {
@@ -416,310 +359,170 @@
       },
 
       submittedValue() {
-        // Assuming that if there is no name, then there's no
-        // need to computed the submittedValue
-        if (!this.name || !this.value) {
+        // Assuming that if there is no name or no value,
+        // then there's no need to compute the submittedValue
+        if (!this.name || !this.modelValue) {
           return;
         }
 
-        if (Array.isArray(this.value)) {
-          return this.value.map(option => option[this.keys.value] || option).join(',');
-        }
-
-        return this.value[this.keys.value] || this.value;
-      },
-
-      // Returns the index of the currently highlighted option
-      highlightedIndex() {
-        return this.options.findIndex(option => looseEqual(this.highlightedOption, option));
-      },
-
-      // Returns an array containing the options and extra annotations
-      annotatedOptions() {
-        const options = JSON.parse(JSON.stringify(this.options));
-        return options.map((option, index) => {
-          // If not object, create object
-          if (typeof option !== 'object') {
-            option = {
-              [this.keys.value]: option,
-              [this.keys.label]: option,
-            };
-          }
-
-          // Add index to object
-          option.index = index;
-
-          // Check if valid prev/next
-          if (!option.disabled) {
-            if (index < this.highlightedIndex) {
-              option.validPreviousOption = true;
-            } else if (index > this.highlightedIndex) {
-              option.validNextOption = true;
-            }
-          }
-
-          // Check if matches
-          option.startsWith = startswith(
-            option[this.keys.label].toLowerCase(),
-            this.quickMatchString.toLowerCase()
-          );
-
-          return option;
-        });
-      },
-      activeColorStyle() {
-        if (this.isActive) {
-          return {
-            color: this.$themeTokens.primary,
-          };
+        if (Array.isArray(this.modelValue)) {
+          return this.modelValue.map(option => option[this.keys.value] || option).join(',');
         }
 
-        return {};
+        return this.modelValue[this.keys.value] || this.modelValue;
       },
-      activeBorderStyle() {
-        if (this.isActive && !this.clearableState) {
-          return {
-            borderBottomColor: this.$themeTokens.primary,
-          };
-        } else if (this.clearableState) {
-          return {
-            cursor: 'default',
-          };
-        }
 
-        return {};
-      },
-      clearableState() {
-        return this.clearable && this.value && Object.keys(this.value).length && !this.disabled;
+      emptyValue() {
+        return this.multiple ? [] : '';
       },
     },
 
     watch: {
       filteredOptions() {
-        this.highlightedOption = this.filteredOptions[0];
+        this.highlightedIndex = 0;
         resetScroll(this.$refs.optionsList);
       },
 
-      showDropdown() {
-        if (this.showDropdown) {
-          this.onOpen();
-          this.$emit('dropdown-open');
-        } else {
-          this.onClose();
-          this.$emit('dropdown-close');
-        }
-      },
-
       query() {
         this.$emit('query-change', this.query);
       },
 
-      quickMatchString(string) {
-        if (string) {
-          if (this.quickMatchTimeout) {
-            clearTimeout(this.quickMatchTimeout);
-            this.quickMatchTimeout = null;
-          }
-          this.quickMatchTimeout = setTimeout(() => {
-            this.quickMatchString = '';
-          }, 500);
+      isActive(value) {
+        if (value) {
+          this.addExternalClickListener(this.$el, this.onExternalClick);
+        } else {
+          this.removeExternalClickListener();
         }
       },
     },
 
     created() {
-      if (!this.value || this.value === '') {
-        this.setValue(null);
+      const invalidMultipleValue = this.multiple && !Array.isArray(this.modelValue);
+      const invalidEmptyValue = !this.modelValue && this.modelValue !== '';
+      if (invalidMultipleValue || invalidEmptyValue) {
+        this.$emit('update:modelValue', this.emptyValue);
+        this.initialValue = JSON.stringify(this.emptyValue);
       }
     },
 
-    mounted() {
-      document.addEventListener('click', this.onExternalClick);
-      // Find nearest scrollable ancestor
-      this.scrollableAncestor = this.$el;
-      while (
-        (this.scrollableAncestor &&
-          this.scrollableAncestor.clientHeight < this.scrollableAncestor.scrollHeight) ||
-        !/auto|scroll/.test(window.getComputedStyle(this.scrollableAncestor).overflowY)
-      ) {
-        if (!this.scrollableAncestor.parentNode) {
-          break;
-        }
-        this.scrollableAncestor = this.scrollableAncestor.parentNode;
-
-        // Stop if we reach the body-- tagName is likely uppercase
-        if (/body/i.test(this.scrollableAncestor.tagName)) {
-          break;
-        }
+    beforeUnmount() {
+      if (typeof this.destroyExternalClickListener === 'function') {
+        this.removeExternalClickListener();
       }
     },
 
-    beforeDestroy() {
-      document.removeEventListener('click', this.onExternalClick);
-    },
-
     methods: {
-      setValue(value) {
-        value = value ? value : this.multiple ? [] : '';
+      addExternalClickListener(
+        elements = [this.$el],
+        callback = null,
+        options = { passive: true }
+      ) {
+        elements = Array.isArray(elements) ? elements : [elements];
+
+        this.destroyExternalClickListener = events.on(
+          'click',
+          document,
+          e => {
+            for (let i = 0; i < elements.length; i++) {
+              if (elements[i].contains(e.target)) {
+                return; // End early, click was internal
+              }
+            }
 
-        this.$emit('input', value);
-        this.$emit('change', value);
+            if (typeof callback === 'function') {
+              callback(e);
+            } else {
+              this.$emit('external-click', e);
+            }
+          },
+          options
+        );
       },
-
-      // Highlights the matching option on key input
-      highlightQuickMatch(event) {
-        // https://github.com/ccampbell/mousetrap/blob/master/mousetrap.js#L39
-        const specialKeyCodes = [
-          8,
-          9,
-          13,
-          16,
-          17,
-          18,
-          20,
-          27,
-          32,
-          33,
-          34,
-          35,
-          36,
-          37,
-          38,
-          39,
-          40,
-          45,
-          46,
-          91,
-          93,
-          224,
-        ];
-        const keyCode = event.keyCode;
-        if (specialKeyCodes.includes(keyCode)) {
-          return;
-        }
-
-        const character = event.key.toString();
-        if (this.hasSearch) {
-          this.openDropdown();
-        } else {
-          this.quickMatchString += character;
-          let matchingItems = this.annotatedOptions.filter(
-            option => option.startsWith && !option.disabled
-          );
-          if (matchingItems.length !== 0) {
-            matchingItems = sortby(matchingItems, [this.keys.label]);
-            matchingItems = sortby(matchingItems, item => item[this.keys.label].length);
-            this.highlightOption(this.options[matchingItems[0].index]);
-          }
+      removeExternalClickListener() {
+        if (this.destroyExternalClickListener) {
+          this.destroyExternalClickListener();
+          this.destroyExternalClickListener = null;
         }
       },
 
-      // Highlights the previous valid option
-      highlightPreviousOption() {
-        const options = this.annotatedOptions;
-        let validPreviousOptionIndex = -1;
-        for (let i = 0; i < options.length; i++) {
-          if (options[i].validPreviousOption) {
-            validPreviousOptionIndex = i;
-          }
-        }
-        if (validPreviousOptionIndex !== -1) {
-          this.highlightOption(this.options[validPreviousOptionIndex]);
-        }
+      setValue(value) {
+        this.$emit('update:modelValue', value);
+        this.$emit('change', value);
       },
 
-      // Highlights the next valid option
-      highlightNextOption() {
-        const options = this.annotatedOptions;
-        const validNextOptionIndex = options.findIndex(option => option.validNextOption);
-        if (validNextOptionIndex !== -1) {
-          this.highlightOption(this.options[validNextOptionIndex]);
+      highlightOption(index, options = { autoScroll: true }) {
+        if (this.highlightedIndex === index || this.$refs.options.length === 0) {
+          return;
         }
-      },
 
-      // Highlights the option
-      highlightOption(option, options = { autoScroll: true }) {
-        if (
-          !option ||
-          option.disabled ||
-          looseEqual(this.highlightedOption, option) ||
-          this.$refs.options.length === 0
-        ) {
-          return;
+        const firstIndex = 0;
+        const lastIndex = this.$refs.options.length - 1;
+
+        if (index < firstIndex) {
+          index = lastIndex;
+        } else if (index > lastIndex) {
+          index = firstIndex;
         }
 
-        this.highlightedOption = option;
-        this.openDropdown();
+        this.highlightedIndex = index;
 
         if (options.autoScroll) {
-          const index = this.filteredOptions.findIndex(option =>
-            looseEqual(this.highlightedOption, option)
-          );
-          const optionToScrollTo = this.$refs.options[index];
-          if (optionToScrollTo) {
-            this.scrollOptionIntoView(optionToScrollTo.$el);
-          }
+          this.scrollOptionIntoView(this.$refs.options[index].$el);
         }
       },
 
-      selectHighlighted() {
-        if (
-          this.highlightedOption &&
-          !this.highlightedOption.disabled &&
-          this.$refs.options.length > 0
-        ) {
-          this.selectOption(this.highlightedOption);
+      selectHighlighted(index, e) {
+        if (this.$refs.options.length > 0) {
+          e.preventDefault();
+          this.selectOption(this.$refs.options[index].option, index);
         }
       },
 
-      selectOption(option, options = { autoClose: true }) {
-        if (!option || option.disabled) {
-          return;
-        }
-
+      selectOption(option, index, options = { autoClose: true }) {
         const shouldSelect = this.multiple && !this.isOptionSelected(option);
 
         if (this.multiple) {
           this.updateOption(option, { select: shouldSelect });
         } else {
           this.setValue(option);
+          this.selectedIndex = index;
         }
 
         this.$emit('select', option, {
-          selected: !this.isOptionSelected(option),
+          selected: this.multiple ? shouldSelect : true,
         });
 
-        this.clearQuery();
+        this.highlightedIndex = index;
+
+        if (!this.multiple) {
+          this.clearQuery();
+        }
 
         if (!this.multiple && options.autoClose) {
           this.closeDropdown();
         }
       },
 
-      // Checks if option is highlighted
-      isOptionHighlighted(option) {
-        return looseEqual(this.highlightedOption, option);
-      },
-
       isOptionSelected(option) {
         if (this.multiple) {
-          return looseIndexOf(this.value, option) > -1;
+          return looseIndexOf(this.modelValue, option) > -1;
         }
-        return looseEqual(this.value, option);
+
+        return looseEqual(this.modelValue, option);
       },
 
       updateOption(option, options = { select: true }) {
         let value = [];
         let updated = false;
-        const i = looseIndexOf(this.value, option);
+        const i = looseIndexOf(this.modelValue, option);
 
         if (options.select && i < 0) {
-          value = this.value.concat(option);
+          value = this.modelValue.concat(option);
           updated = true;
         }
 
         if (!options.select && i > -1) {
-          value = this.value.slice(0, i).concat(this.value.slice(i + 1));
+          value = this.modelValue.slice(0, i).concat(this.modelValue.slice(i + 1));
           updated = true;
         }
 
@@ -728,64 +531,55 @@
         }
       },
 
-      defaultFilter(option) {
-        const query = this.query.toLowerCase();
+      defaultFilter(option, query) {
         let text = option[this.keys.label] || option;
 
         if (typeof text === 'string') {
           text = text.toLowerCase();
         }
 
-        return fuzzysearch(query, text);
+        return fuzzysearch(query.toLowerCase(), text);
+      },
+
+      clearSelection() {
+        this.setValue(this.emptyValue);
       },
 
       clearQuery() {
         this.query = '';
       },
 
+      focus() {
+        this.$refs.label.focus();
+      },
+
       toggleDropdown() {
-        this.calculateSpaceBelow();
-        this[this.showDropdown ? 'closeDropdown' : 'openDropdown']();
+        this.$refs.dropdown.toggle();
       },
 
       openDropdown() {
-        if (this.disabled || this.clearableState) {
+        if (this.disabled) {
           return;
         }
 
-        if (this.highlightedIndex === -1) {
-          this.highlightNextOption();
-        }
-
-        this.showDropdown = true;
-        // IE: clicking label doesn't focus the select element
-        // to set isActive to true
-        if (!this.isActive) {
-          this.isActive = true;
-        }
+        this.$refs.dropdown.open();
       },
 
-      closeDropdown(options = { autoBlur: false }) {
-        this.showDropdown = false;
-        this.query = '';
+      closeDropdown(options = { blurAfterClose: false }) {
+        this.$refs.dropdown.close();
+
         if (!this.isTouched) {
           this.isTouched = true;
           this.$emit('touch');
         }
 
-        if (options.autoBlur) {
+        if (options.blurAfterClose) {
           this.isActive = false;
         } else {
           this.$refs.label.focus();
         }
       },
 
-      onMouseover(option) {
-        if (this.showDropdown) {
-          this.highlightOption(option, { autoScroll: false });
-        }
-      },
-
       onFocus(e) {
         if (this.isActive) {
           return;
@@ -799,37 +593,37 @@
         this.isActive = false;
         this.$emit('blur', e);
 
-        if (this.showDropdown) {
-          this.closeDropdown({ autoBlur: true });
+        if (this.$refs.dropdown.isOpen()) {
+          this.closeDropdown({ blurAfterClose: true });
         }
       },
 
       onOpen() {
-        this.highlightedOption = this.multiple ? null : this.value;
+        this.isActive = true;
+
+        this.$refs.dropdown.$el.style.width = this.$refs.label.getBoundingClientRect().width + 'px';
+
         this.$nextTick(() => {
-          this.$refs[this.hasSearch ? 'searchInput' : 'dropdown'].focus();
-          const selectedOption = this.$refs.optionsList.querySelector('.is-selected');
-          if (selectedOption) {
-            this.scrollOptionIntoView(selectedOption);
-          } else {
-            this.scrollOptionIntoView(
-              this.$refs.optionsList.querySelector('.ui-select-option:not(.is-disabled)')
-            );
-          }
+          this.scrollOptionIntoView(this.$refs.optionsList.querySelector('.is-selected'));
         });
+
+        this.$emit('dropdown-open');
+      },
+
+      onReveal() {
+        this.$refs[this.hasSearch ? 'searchInput' : 'dropdownContent'].focus();
       },
 
       onClose() {
-        this.highlightedOption = this.multiple ? null : this.value;
+        this.highlightedIndex = this.multiple ? -1 : this.selectedIndex;
+        this.$emit('dropdown-close');
       },
 
-      onExternalClick(e) {
-        if (!this.$el.contains(e.target)) {
-          if (this.showDropdown) {
-            this.closeDropdown({ autoBlur: true });
-          } else if (this.isActive) {
-            this.isActive = false;
-          }
+      onExternalClick() {
+        if (this.$refs.dropdown.isOpen()) {
+          this.closeDropdown({ blurAfterClose: true });
+        } else if (this.isActive) {
+          this.isActive = false;
         }
       },
 
@@ -840,85 +634,63 @@
         });
       },
 
-      /**
-       * @public
-       */
       reset() {
         this.setValue(JSON.parse(this.initialValue));
         this.clearQuery();
         this.resetTouched();
-        this.highlightedOption = null;
+
+        this.selectedIndex = -1;
+        this.highlightedIndex = -1;
       },
 
       resetTouched(options = { touched: false }) {
         this.isTouched = options.touched;
       },
-      calculateSpaceBelow() {
-        // Get the height of element
-        const buttonHeight = this.$el.getBoundingClientRect().height;
-
-        // Get the position of the element relative to the viewport
-        const buttonPosition = this.$el.getBoundingClientRect().top;
-
-        // Check if there is enough space below element
-        // and update the "dropdownButtonBottom" data property accordingly
-        const notEnoughSpaceBelow =
-          buttonPosition > this.maxDropdownHeight &&
-          this.scrollableAncestor.offsetHeight - buttonPosition <
-            buttonHeight + this.maxDropdownHeight;
-
-        this.dropdownButtonBottom = notEnoughSpaceBelow ? buttonHeight + 'px' : 'auto';
-      },
     },
   };
 
 </script>
 
+<style lang="scss">
 
-<style lang="scss" scoped>
-
-  @import '~kolibri-design-system/lib/styles/definitions';
-  @import '~kolibri-design-system/lib/keen/styles/imports';
-
-  /* stylelint-disable csstree/validator */
+  @import '../keen/styles/imports';
 
   .ui-select {
-    @include font-family-noto;
-
     position: relative;
     display: flex;
     align-items: flex-start;
     margin-bottom: $ui-input-margin-bottom;
+    font-family: $font-stack;
     outline: none;
 
     &:hover:not(.is-disabled) {
-      .ui-select-label-text {
+      .ui-select__label-text {
         color: $ui-input-label-color--hover;
       }
 
-      .ui-select-display {
+      .ui-select__display {
         border-bottom-color: $ui-input-border-color--hover;
       }
 
-      .ui-select-dropdown-button {
+      .ui-select__dropdown-button {
         color: $ui-input-button-color--hover;
       }
     }
 
     &.is-active:not(.is-disabled) {
-      .ui-select-display {
-        border-bottom-width: $ui-input-border-width--active;
+      .ui-select__label-text,
+      .ui-select__icon-wrapper .ui-icon {
+        color: $ui-input-label-color--active;
       }
-    }
 
-    &.is-active {
-      .ui-select-display {
+      .ui-select__display {
+        border-bottom-color: $ui-input-border-color--active;
         border-bottom-width: $ui-input-border-width--active;
       }
     }
 
     &.has-floating-label {
-      .ui-select-label-text {
+      .ui-select__label-text {
         // Behaves like a block, but width is the width of its content.
         // Needed here so label doesn't overflow parent when scaled.
         display: table;
@@ -936,69 +708,70 @@
     }
 
     &.has-label {
-      .ui-select-icon-wrapper {
+      .ui-select__icon-wrapper {
         padding-top: $ui-input-icon-margin-top--with-label;
       }
 
-      .ui-select-dropdown-button {
+      .ui-select__dropdown-button {
         top: $ui-input-button-margin-top--with-label;
       }
     }
 
     &:not(.is-multiple) {
-      .ui-select-display {
+      .ui-select__display {
         height: $ui-input-height;
         line-height: 1;
       }
     }
 
     &.is-multiple {
-      .ui-select-display {
-        padding-top: rem-calc(4px);
-        padding-bottom: rem-calc(4px);
+      .ui-select__display {
+        padding-top: rem(4px);
+        padding-bottom: rem(4px);
         line-height: 1.4;
       }
     }
 
     &.is-invalid:not(.is-disabled) {
-      .ui-select-label-text,
-      .ui-select-icon-wrapper .ui-icon {
+      .ui-select__label-text,
+      .ui-select__icon-wrapper .ui-icon {
         color: $ui-input-label-color--invalid;
       }
 
-      .ui-select-display {
+      .ui-select__display {
         border-bottom-color: $ui-input-border-color--invalid;
       }
 
-      .ui-select-feedback {
+      .ui-select__feedback {
         color: $ui-input-feedback-color--invalid;
       }
     }
 
     &.is-disabled {
-      .ui-select-display {
+      .ui-select__display {
         color: $ui-input-text-color--disabled;
         cursor: default;
+        border-bottom-style: $ui-input-border-style--disabled;
+        border-bottom-width: $ui-input-border-width--active;
       }
 
-      .ui-select-dropdown-button,
-      .ui-select-display-value.is-placeholder {
+      .ui-select__dropdown-button,
+      .ui-select__display-value.is-placeholder {
         color: $ui-input-text-color--disabled;
         opacity: $ui-input-button-opacity--disabled;
       }
 
-      .ui-select-icon-wrapper .ui-icon {
+      .ui-select__icon-wrapper .ui-icon {
         opacity: $ui-input-icon-opacity--disabled;
       }
 
-      .ui-select-feedback {
+      .ui-select__feedback {
         opacity: $ui-input-feedback-opacity--disabled;
       }
     }
   }
 
-  .ui-select-label {
-    position: relative;
+  .ui-select__label {
     display: block;
     width: 100%;
     padding: 0;
@@ -1006,7 +779,7 @@
     outline: none;
   }
 
-  .ui-select-icon-wrapper {
+  .ui-select__icon-wrapper {
     flex-shrink: 0;
     padding-top: $ui-input-icon-margin-top;
     margin-right: $ui-input-icon-margin-right;
@@ -1016,11 +789,11 @@
     }
   }
 
-  .ui-select-content {
+  .ui-select__content {
     flex-grow: 1;
   }
 
-  .ui-select-label-text {
+  .ui-select__label-text {
     margin-bottom: $ui-input-label-margin-bottom;
     font-size: $ui-input-label-font-size;
     line-height: $ui-input-label-line-height;
@@ -1030,73 +803,67 @@
     transform-origin: left;
   }
 
-  .ui-select-display {
+  .ui-select__display {
     display: flex;
     align-items: center;
     width: 100%;
+    min-height: $ui-input-height;
     padding: 0;
+    font-family: inherit;
     font-size: $ui-input-text-font-size;
     font-weight: normal;
     color: $ui-input-text-color;
     cursor: pointer;
     user-select: none;
-    border: 0;
+    border: none;
     border-bottom-color: $ui-input-border-color;
     border-bottom-style: solid;
     border-bottom-width: $ui-input-border-width;
     transition: border 0.1s ease;
   }
 
-  .ui-select-display-value {
-    position: relative;
-    top: 2px;
+  .ui-select__display-value {
     flex-grow: 1;
-    height: 22px; // height and top help prevent descender clipping
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    // if inline-block
-    white-space: nowrap;
 
     &.is-placeholder {
       color: $hint-text-color;
     }
   }
 
-  .ui-select-dropdown-button {
-    margin-right: rem-calc(-4px);
+  .ui-select__dropdown-button {
+    margin-right: rem(-4px);
     margin-left: auto;
     font-size: $ui-input-button-size;
     color: $ui-input-button-color;
   }
 
-  .ui-select-dropdown {
-    position: absolute;
-    z-index: $z-index-dropdown;
+  .ui-select__dropdown {
     display: block;
     width: 100%;
-    min-width: rem-calc(180px);
+    min-width: rem(180px);
     padding: 0;
     margin: 0;
-    margin-bottom: rem-calc(8px);
+    margin-bottom: rem(8px);
     list-style-type: none;
     outline: none;
-    box-shadow: 1px 2px 8px $md-grey-600;
   }
 
-  .ui-select-search-input {
-    @include font-family-noto;
+  .ui-select__dropdown-content {
+    outline: none;
+  }
 
+  .ui-select__search-input {
     width: 100%;
-    height: $ui-input-height + rem-calc(4px);
-    padding: rem-calc(0 12px);
-    padding-left: rem-calc(40px);
-    font-size: $ui-input-text-font-size - rem-calc(1px);
+    height: $ui-input-height + rem(4px);
+    padding: rem(0 12px);
+    padding-left: rem(40px);
+    font-family: inherit;
+    font-size: $ui-input-text-font-size - rem(1px);
     font-weight: normal;
     color: $ui-input-text-color;
     cursor: auto;
     background: none;
-    border: 0;
+    border: none;
     border-bottom-color: $ui-input-border-color;
     border-bottom-style: solid;
     border-bottom-width: $ui-input-border-width;
@@ -1109,47 +876,50 @@
       display: none;
     }
 
-    &:focus + .ui-select-search-icon {
+    &:focus + .ui-select__search-icon {
       color: $ui-input-label-color--active;
     }
   }
 
-  .ui-select-search-icon,
-  .ui-select-search-progress {
-    position: absolute;
-    top: rem-calc(8px);
+  .ui-select__search {
+    .ui-select__search-icon,
+    .ui-select__search-progress {
+      position: absolute;
+      top: rem(8px);
+    }
   }
 
-  .ui-select-search-icon {
-    left: rem-calc(12px);
-    font-size: rem-calc(20px);
+  .ui-select__search-icon {
+    left: rem(12px);
+    font-size: rem(20px);
     color: $ui-input-icon-color;
   }
 
-  .ui-select-search-progress {
-    right: rem-calc(12px);
+  .ui-select__search-progress {
+    right: rem(12px);
   }
 
-  .ui-select-options {
+  .ui-select__options {
     position: relative;
     display: block;
     min-width: 100%;
-    max-height: rem-calc(256px);
+    max-height: rem(256px);
     padding: 0;
     margin: 0;
     overflow-y: auto;
     color: $primary-text-color;
     list-style-type: none;
+    background-color: white;
   }
 
-  .ui-select-no-results {
+  .ui-select__no-results {
     width: 100%;
-    padding: rem-calc(8px 12px);
-    font-size: rem-calc(14px);
+    padding: rem(8px 12px);
+    font-size: rem(14px);
     color: $secondary-text-color;
   }
 
-  .ui-select-feedback {
+  .ui-select__feedback {
     position: relative;
     padding-top: $ui-input-feedback-padding-top;
     margin: 0;
@@ -1162,33 +932,12 @@
   // Icon Positions
   // ================================================
 
-  .ui-select-icon-position-right {
-    .ui-select-icon-wrapper {
+  .ui-select--icon-position-right {
+    .ui-select__icon-wrapper {
       order: 1;
       margin-right: 0;
-      margin-left: rem-calc(8px);
+      margin-left: rem(8px);
     }
   }
 
-  // ================================================
-  // Transitions
-  // ================================================
-
-  .ui-select-transition-fade-enter-active,
-  .ui-select-transition-fade-leave-active {
-    transition: opacity 0.2s ease;
-  }
-
-  .ui-select-transition-fade-enter,
-  .ui-select-transition-fade-leave-active {
-    opacity: 0;
-  }
-
-  /* stylelint-enable */
-
-  .overlay-close-button {
-    position: absolute;
-    right: 0;
-  }
-
 </style>
diff --git a/lib/KSelect/KeenUiSelectOption.vue b/lib/KSelect/KeenUiSelectOption.vue
index a3b93fd31..f72a4e7ef 100644
--- a/lib/KSelect/KeenUiSelectOption.vue
+++ b/lib/KSelect/KeenUiSelectOption.vue
@@ -1,14 +1,24 @@
 <template>
 
-  <li class="ui-select-option" :class="classes" :style="selectedStyle">
+  <li class="ui-select-option" :class="classes">
     <slot>
-      <div v-if="multiple" class="ui-select-option-checkbox" :style="selectedStyle">
+      <div v-if="type === 'basic'" class="ui-select-option__basic">
+        {{ option[keys.label] || option }}
+      </div>
+
+      <div v-if="type === 'image'" class="ui-select-option__image">
+        <div class="ui-select-option__image-object" :style="imageStyle"></div>
+
+        <div class="ui-select-option__image-text">
+          {{ option[keys.label] }}
+        </div>
+      </div>
+
+      <div v-if="multiple" class="ui-select-option__checkbox">
         <UiIcon v-if="selected">
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
             <path
-              d="M9.984 17.016l9-9-1.406-1.453-7.594 7.594-3.563-3.563L5.016
-            12zm9-14.016C20.11 3 21 3.938 21 5.016v13.97C21 20.062 20.11 21 18.984
-            21H5.014C3.89 21 3 20.064 3 18.986V5.015C3 3.94 3.89 3 5.014 3h13.97z"
+              d="M9.984 17.016l9-9-1.406-1.453-7.594 7.594-3.563-3.563L5.016 12zm9-14.016C20.11 3 21 3.938 21 5.016v13.97C21 20.062 20.11 21 18.984 21H5.014C3.89 21 3 20.064 3 18.986V5.015C3 3.94 3.89 3 5.014 3h13.97z"
             />
           </svg>
         </UiIcon>
@@ -16,46 +26,30 @@
         <UiIcon v-else>
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
             <path
-              d="M18.984 3C20.062 3 21 3.938 21 5.016v13.97C21 20.062 20.062
-            21 18.984 21H5.014C3.938 21 3 20.064 3 18.986V5.015C3 3.94 3.936
-            3 5.014 3h13.97zm0 2.016H5.014v13.97h13.97V5.015z"
+              d="M18.984 3C20.062 3 21 3.938 21 5.016v13.97C21 20.062 20.062 21 18.984 21H5.014C3.938 21 3 20.064 3 18.986V5.015C3 3.94 3.936 3 5.014 3h13.97zm0 2.016H5.014v13.97h13.97V5.015z"
             />
           </svg>
         </UiIcon>
       </div>
-
-      <div v-if="type === 'basic'" class="ui-select-option-basic">
-        {{ option[keys.label] || option }}
-      </div>
-
-      <div v-if="type === 'image'" class="ui-select-option-image">
-        <div class="ui-select-option-image-object" :style="imageStyle"></div>
-
-        <div
-          class="ui-select-option-image-text"
-        >
-          {{ option[keys.label] }}
-        </div>
-      </div>
     </slot>
   </li>
 
 </template>
 
-
 <script>
 
-  import UiIcon from '../keen/UiIcon';
+  import UiIcon from '../keen/UiIcon.vue';
 
   export default {
-    name: 'KeenUiSelectOption',
+    name: 'UiSelectOption',
+
     components: {
       UiIcon,
     },
 
     props: {
       option: {
-        type: [String, Object],
+        type: [String, Number, Object],
         required: true,
       },
       type: {
@@ -78,6 +72,7 @@
         type: Object,
         default() {
           return {
+            class: 'class',
             label: 'label',
             image: 'image',
           };
@@ -89,44 +84,30 @@
       classes() {
         return [
           `ui-select-option--type-${this.type}`,
+          this.option[this.keys.class],
           { 'is-highlighted': this.highlighted },
           { 'is-selected': this.selected },
-          { 'is-disabled': this.option.disabled },
         ];
       },
 
       imageStyle() {
         return { 'background-image': 'url(' + this.option[this.keys.image] + ')' };
       },
-      selectedStyle() {
-        if (this.selected) {
-          return {
-            color: this.$themeTokens.primary,
-          };
-        }
-
-        return {};
-      },
     },
   };
 
 </script>
 
+<style lang="scss">
 
-<style lang="scss" scoped>
-
-  @import '~kolibri-design-system/lib/styles/definitions';
-  @import '~kolibri-design-system/lib/keen/styles/imports';
-
-  /* stylelint-disable csstree/validator */
+  @import '../keen/styles/imports';
 
   $ui-select-option-checkbox-color: rgba(black, 0.38) !default;
 
   .ui-select-option {
-    @include font-family-noto;
-
     display: flex;
     align-items: center;
+    font-family: inherit;
     font-size: $ui-dropdown-item-font-size;
     cursor: pointer;
     user-select: none;
@@ -136,43 +117,37 @@
       color: $brand-primary-color;
       background-color: rgba(black, 0.05);
 
-      .ui-select-option-checkbox {
+      .ui-select-option__checkbox {
         color: $brand-primary-color;
       }
     }
 
-    &.is-highlighted:not(.is-disabled) {
+    &.is-highlighted {
       background-color: rgba(black, 0.1);
     }
-
-    &.is-disabled {
-      color: $secondary-text-color;
-      cursor: default;
-      opacity: 0.5;
-    }
   }
 
-  .ui-select-option-basic,
-  .ui-select-option-image-text {
+  .ui-select-option__basic,
+  .ui-select-option__image-text {
     @include text-truncation;
   }
 
-  .ui-select-option-image {
+  .ui-select-option__image {
     display: flex;
     align-items: center;
   }
 
-  .ui-select-option-image-object {
-    width: rem-calc(32px);
-    height: rem-calc(32px);
-    margin-right: rem-calc(12px);
+  .ui-select-option__image-object {
+    width: rem(32px);
+    height: rem(32px);
+    margin-right: rem(12px);
     background-position: 50%;
     background-size: cover;
     border-radius: 50%;
   }
 
-  .ui-select-option-checkbox {
-    margin-right: rem-calc(8px);
+  .ui-select-option__checkbox {
+    margin-left: auto;
     color: $ui-select-option-checkbox-color;
   }
 
@@ -181,13 +156,11 @@
   // ================================================
 
   .ui-select-option--type-basic {
-    padding: rem-calc(6px 12px);
+    padding: rem(6px 12px);
   }
 
   .ui-select-option--type-image {
-    padding: rem-calc(4px 12px);
+    padding: rem(4px 12px);
   }
 
-  /* stylelint-enable */
-
 </style>
diff --git a/lib/KSelect/index.vue b/lib/KSelect/index.vue
index a92a9008e..872e1354d 100644
--- a/lib/KSelect/index.vue
+++ b/lib/KSelect/index.vue
@@ -6,7 +6,7 @@
       'k-select-inline': inline,
       'k-select-disabled': disabled,
     }"
-    :value="selection"
+    :modelValue="selection"
     :options="options"
     :label="label"
     :floatingLabel="floatingLabel"
diff --git a/lib/KSelect/mixins/RespondsToExternalClick.vue b/lib/KSelect/mixins/RespondsToExternalClick.vue
new file mode 100644
index 000000000..31b49d675
--- /dev/null
+++ b/lib/KSelect/mixins/RespondsToExternalClick.vue
@@ -0,0 +1,38 @@
+import events from '../../keen/helpers/events';
+
+export default {
+    emits: ['external-click'],
+
+    beforeUnmount() {
+        if (typeof this.destroyExternalClickListener === 'function') {
+            this.removeExternalClickListener();
+        }
+    },
+
+    methods: {
+        addExternalClickListener(elements = [this.$el], callback = null, options = { passive: true }) {
+            elements = Array.isArray(elements) ? elements : [elements];
+
+            this.destroyExternalClickListener = events.on('click', document, e => {
+                for (let i = 0; i < elements.length; i++) {
+                    if (elements[i].contains(e.target)) {
+                        return; // End early, click was internal
+                    }
+                }
+
+                if (typeof callback === 'function') {
+                    callback(e);
+                } else {
+                    this.$emit('external-click', e);
+                }
+            }, options);
+        },
+
+        removeExternalClickListener() {
+            if (this.destroyExternalClickListener) {
+                this.destroyExternalClickListener();
+                this.destroyExternalClickListener = null;
+            }
+        }
+    }
+};
diff --git a/lib/KSelectinKModal.vue b/lib/KSelectinKModal.vue
new file mode 100644
index 000000000..aae83ede6
--- /dev/null
+++ b/lib/KSelectinKModal.vue
@@ -0,0 +1,15 @@
+<template>
+
+</template>
+
+<script>
+
+  export default {
+    name: 'KSelectInKModal',
+  };
+
+</script>
+
+<style scoped>
+
+</style>