From a5b3b5b68ba5f66e96147e60851cd7229c8e95af Mon Sep 17 00:00:00 2001
From: Kai Arrowood <kai.arrowood@konghq.com>
Date: Fri, 15 Jul 2022 11:07:08 -0400
Subject: [PATCH] feat(kselect): misc fixes [khcp-4146] (#692)

- Fix `width` prop handling to ensure selected item, input, and dropdown are the same size
- Add support for `%` for `width` props
- Add `enableFilter` prop to control filter support on `KSelect` input
---
 docs/components/menu.md                       | 16 ++--
 docs/components/popover.md                    |  2 +-
 docs/components/select.md                     | 75 ++++++++++++++++---
 .../__snapshots__/KCatalog.spec.js.snap       | 18 ++---
 packages/KMenu/KMenu.vue                      | 23 +++---
 .../__snapshots__/KPagination.spec.js.snap    |  4 +-
 packages/KPop/KPop.vue                        | 11 ++-
 packages/KSelect/KSelect.spec.js              |  6 +-
 packages/KSelect/KSelect.vue                  | 57 +++++++++++---
 .../__snapshots__/KSelect.spec.js.snap        |  6 +-
 .../KTable/__snapshots__/KTable.spec.js.snap  |  6 +-
 packages/styles/forms/_inputs.scss            | 54 ++++++++-----
 12 files changed, 196 insertions(+), 82 deletions(-)

diff --git a/docs/components/menu.md b/docs/components/menu.md
index bad0011360..c7528249b1 100644
--- a/docs/components/menu.md
+++ b/docs/components/menu.md
@@ -72,12 +72,12 @@ function getMenuItems(count) {
 
 ### width
 
-You can pass a `width` string for menu. By default the `width` is `284px`.
+You can pass a `width` string for menu. Currently we support numbers (will be converted to `px`), `auto`, and percentages for width. By default the `width` is `284px`.
 
 <KMenu :items="getMenuItems(3)" width="735" />
 
 ```vue
-<KMenu :items="getMenuItems(3)" width="735" /> 
+<KMenu :items="getMenuItems(3)" width="735" />
 ```
 
 ## KMenuItem
@@ -97,11 +97,11 @@ You can pass a `width` string for menu. By default the `width` is `284px`.
 ```vue
   <KMenuItem
     :item="{
-      title: 'some title', 
+      title: 'some title',
       description: 'some description'
     }"
     :expandable="true"
-    type="string" 
+    type="string"
   />
 ```
 
@@ -111,7 +111,7 @@ You can pass a `width` string for menu. By default the `width` is `284px`.
 - `itemBody` - the body content for the menu item
 
 ```vue
-<KMenuItem>       
+<KMenuItem>
   <template v-slot:itemTitle>
     Custom Title!
   </template>
@@ -177,9 +177,9 @@ This should be used instead of the `items` property.
     </KMenuItem>
 
     <KMenuItem type="divider" />
-    
-    <KMenuItem :expandable="true" 
-      :item="customItem" 
+
+    <KMenuItem :expandable="true"
+      :item="customItem"
       type="string"
      />
     <KMenuItem :expandable="true" last-menu-item>
diff --git a/docs/components/popover.md b/docs/components/popover.md
index 4e99275d27..331be7bcd3 100644
--- a/docs/components/popover.md
+++ b/docs/components/popover.md
@@ -285,7 +285,7 @@ Use fixed positioning of the popover to avoid content being clipped by parental
 
 ### width
 
-The width of the popover body - by default it is 200px.
+The width of the popover body - by default it is `200px`. Currently we support numbers (will be converted to `px`), `auto`, and percentages for width.
 
 <KPop title="Cool header" width="300">
   <KButton>button</KButton>
diff --git a/docs/components/select.md b/docs/components/select.md
index 132923169e..11271f917d 100644
--- a/docs/components/select.md
+++ b/docs/components/select.md
@@ -255,7 +255,11 @@ export default {
 ### width
 
 You can pass a `width` string for dropdown. By default the `width` is `200px`. This is the width
-of the input, dropdown, and selected item.
+of the input, dropdown, and selected item. Currently we support numbers (will be converted to `px`), `auto`, and percentages for width.
+
+:::tip Note
+Because we are controlling the widths of multiple elements, we recommend using this prop to control the width instead of explicitly adding classes or styles to the `KSelect` component.
+:::
 
 <div>
   <KSelect width="250" :items="[{
@@ -285,6 +289,57 @@ of the input, dropdown, and selected item.
 
 Use fixed positioning of the popover to avoid content being clipped by parental boundaries - defaults to `false`. See [`KPop` docs](popover.html#positionfixed) for more information.
 
+### enableFiltering
+
+Use this prop to control whether or not the `KSelect` component with an `appearance` prop set to a value of `select` or `dropdown` allows filtering. By default, filtering is enabled for `dropdown` appearance and is disabled for `select` appearance. `button` style `appearance` does not have filter support because it is a button.
+
+<div>
+  <KSelect :items="[{
+      label: 'test',
+      value: 'test'
+    }, {
+      label: 'Test 1',
+      value: 'test1'
+    }]"
+    :enable-filtering="false"
+    class="mb-2"
+  />
+
+  <KSelect :items="[{
+      label: 'test',
+      value: 'test'
+    }, {
+      label: 'Test 1',
+      value: 'test1'
+    }]"
+    appearance="select"
+    :enable-filtering="true"
+  />
+</div>
+
+```html
+<KSelect :items="[{
+    label: 'test',
+    value: 'test'
+  }, {
+    label: 'Test 1',
+    value: 'test1'
+  }]"
+  :enable-filtering="false"
+/>
+
+<KSelect :items="[{
+    label: 'test',
+    value: 'test'
+  }, {
+    label: 'Test 1',
+    value: 'test1'
+  }]"
+  appearance="select"
+  :enable-filtering="true"
+/>
+```
+
 ### filterFunc
 
 Use this prop to override the default filter function if you want to do something like filter on an attribute other than `label`. Your filter function
@@ -347,7 +402,7 @@ You can pass any input attribute and it will get properly bound to the element.
 You can use the `item-template` slot to customize the look and feel of your items. Use slots to gain access to the `item` data.
 
 <div>
-  <KSelect :items="myItems" width="500" :filterFunc="customFilter">
+  <KSelect :items="myItems" width="100%" :filterFunc="customFilter">
     <template v-slot:item-template="{ item }">
       <div class="select-item-label">{{ item.label }}</div>
       <div class="select-item-desc">{{ item.description }}</div>
@@ -356,7 +411,7 @@ You can use the `item-template` slot to customize the look and feel of your item
 </div>
 
 ```html
-<KSelect :items="myItems" width="500" :filterFunc="customFilter">
+<KSelect :items="myItems" width="100%" :filterFunc="customFilter">
   <template v-slot:item-template="{ item }">
     <div class="select-item-label">{{item.label}}</div>
     <div class="select-item-desc">{{item.description}}</div>
@@ -440,12 +495,12 @@ export default {
 </script>
 
 <style lang="scss">
-  .select-item-label {
-    color: blue;
-    font-weight: bold;
-  }
+.select-item-label {
+  color: blue;
+  font-weight: bold;
+}
 
-  .select-item-desc {
-    color: red;
-  }
+.select-item-desc {
+  color: red;
+}
 </style>
diff --git a/packages/KCatalog/__snapshots__/KCatalog.spec.js.snap b/packages/KCatalog/__snapshots__/KCatalog.spec.js.snap
index a03fd701a7..683171df1f 100644
--- a/packages/KCatalog/__snapshots__/KCatalog.spec.js.snap
+++ b/packages/KCatalog/__snapshots__/KCatalog.spec.js.snap
@@ -133,7 +133,7 @@ exports[`KCatalog general can change card sizes - large 1`] = `
 </svg>
 </span></button>
         </div>
-        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 200px; max-width: 350px; display: none;" name="fade">
+        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
           <!---->
           <div class="k-popover-content">
             <ul class="k-select-list ma-0 pa-0">
@@ -299,7 +299,7 @@ exports[`KCatalog general can change card sizes - small 1`] = `
 </svg>
 </span></button>
         </div>
-        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 200px; max-width: 350px; display: none;" name="fade">
+        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
           <!---->
           <div class="k-popover-content">
             <ul class="k-select-list ma-0 pa-0">
@@ -385,7 +385,7 @@ exports[`KCatalog general can disable truncation 1`] = `
 </svg>
 </span></button>
         </div>
-        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 200px; max-width: 350px; display: none;" name="fade">
+        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
           <!---->
           <div class="k-popover-content">
             <ul class="k-select-list ma-0 pa-0">
@@ -471,7 +471,7 @@ exports[`KCatalog general handles truncation 1`] = `
 </svg>
 </span></button>
         </div>
-        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 200px; max-width: 350px; display: none;" name="fade">
+        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
           <!---->
           <div class="k-popover-content">
             <ul class="k-select-list ma-0 pa-0">
@@ -537,7 +537,7 @@ exports[`KCatalog general matches snapshot 1`] = `
 </svg>
 </span></button>
         </div>
-        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 200px; max-width: 350px; display: none;" name="fade">
+        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
           <!---->
           <div class="k-popover-content">
             <ul class="k-select-list ma-0 pa-0">
@@ -705,7 +705,7 @@ exports[`KCatalog general renders proper cards when using props 1`] = `
 </svg>
 </span></button>
         </div>
-        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 200px; max-width: 350px; display: none;" name="fade">
+        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
           <!---->
           <div class="k-popover-content">
             <ul class="k-select-list ma-0 pa-0">
@@ -785,7 +785,7 @@ exports[`KCatalog general renders slots when passed 1`] = `
 </svg>
 </span></button>
         </div>
-        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 200px; max-width: 350px; display: none;" name="fade">
+        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
           <!---->
           <div class="k-popover-content">
             <ul class="k-select-list ma-0 pa-0">
@@ -867,7 +867,7 @@ exports[`KCatalog general renders slotted cards when passed 1`] = `
 </svg>
 </span></button>
         </div>
-        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 200px; max-width: 350px; display: none;" name="fade">
+        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
           <!---->
           <div class="k-popover-content">
             <ul class="k-select-list ma-0 pa-0">
@@ -933,7 +933,7 @@ exports[`KCatalog states displays a loading skeletion when the "isLoading" prop
 </svg>
 </span></button>
         </div>
-        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 200px; max-width: 350px; display: none;" name="fade">
+        <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
           <!---->
           <div class="k-popover-content">
             <ul class="k-select-list ma-0 pa-0">
diff --git a/packages/KMenu/KMenu.vue b/packages/KMenu/KMenu.vue
index c45b45afc9..75b7932db2 100644
--- a/packages/KMenu/KMenu.vue
+++ b/packages/KMenu/KMenu.vue
@@ -4,17 +4,16 @@
     class="k-menu">
     <slot name="body">
       <div>
-        <template v-for="(item,index) in items">
-          <KMenuItem
-            :item="item"
-            :expandable="item.expandable"
-            :key="item.key"
-            :type="item.type"
-            :last-menu-item="index === items.length-1"
-            :test-mode="testMode"
-            :class="{ 'last-menu-item': index === items.length-1 }"
-          />
-        </template>
+        <KMenuItem
+          v-for="(item,index) in items"
+          :item="item"
+          :expandable="item.expandable"
+          :key="item.key"
+          :type="item.type"
+          :last-menu-item="index === items.length-1"
+          :test-mode="testMode"
+          :class="{ 'last-menu-item': index === items.length-1 }"
+        />
       </div>
     </slot>
     <div
@@ -63,7 +62,7 @@ export default {
   computed: {
     widthStyle: function () {
       return {
-        width: this.width === 'auto' ? this.width : this.width + 'px'
+        width: this.width === 'auto' || this.width.endsWith('%') || this.width.endsWith('px') ? this.width : this.width + 'px'
       }
     },
 
diff --git a/packages/KPagination/__snapshots__/KPagination.spec.js.snap b/packages/KPagination/__snapshots__/KPagination.spec.js.snap
index 19bf1edbc0..09c35c6851 100644
--- a/packages/KPagination/__snapshots__/KPagination.spec.js.snap
+++ b/packages/KPagination/__snapshots__/KPagination.spec.js.snap
@@ -41,7 +41,7 @@ exports[`KPagination correctly renders props 1`] = `
 </svg>
 </span></button>
   </div>
-  <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 200px; max-width: 350px; display: none;" name="fade">
+  <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
     <!---->
     <div class="k-popover-content">
       <ul class="k-select-list ma-0 pa-0">
@@ -116,7 +116,7 @@ exports[`KPagination matches snapshot 1`] = `
 </svg>
 </span></button>
   </div>
-  <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 200px; max-width: 350px; display: none;" name="fade">
+  <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
     <!---->
     <div class="k-popover-content">
       <ul class="k-select-list ma-0 pa-0">
diff --git a/packages/KPop/KPop.vue b/packages/KPop/KPop.vue
index 82301334c9..8473945dc7 100644
--- a/packages/KPop/KPop.vue
+++ b/packages/KPop/KPop.vue
@@ -24,7 +24,7 @@
           ref="popper"
           :id="popoverId"
           :style="popoverStyle"
-          :class="[popoverClasses, {'hide-caret': hideCaret }, { 'pb-0': $scopedSlots.actions }]"
+          :class="popoverClassObj"
           role="region"
           class="k-popover">
           <div
@@ -60,7 +60,7 @@
         ref="popper"
         :id="popoverId"
         :style="popoverStyle"
-        :class="[popoverClasses, {'hide-caret': hideCaret }, { 'pb-0': $scopedSlots.actions }]"
+        :class="popoverClassObj"
         role="region"
         class="k-popover">
         <div
@@ -265,9 +265,12 @@ export default {
   computed: {
     popoverStyle: function () {
       return {
-        width: this.width === 'auto' ? this.width : this.width + 'px',
-        'max-width': this.maxWidth === 'auto' ? this.maxWidth : this.maxWidth + 'px'
+        width: this.width === 'auto' || this.width.endsWith('%') || this.width.endsWith('px') ? this.width : this.width + 'px',
+        'max-width': this.maxWidth === 'auto' || this.maxWidth.endsWith('%') || this.maxWidth.endsWith('px') ? this.maxWidth : this.maxWidth + 'px'
       }
+    },
+    popoverClassObj: function () {
+      return [this.popoverClasses, { 'hide-caret': this.hideCaret }, { 'pb-0': this.$slots.actions }]
     }
   },
 
diff --git a/packages/KSelect/KSelect.spec.js b/packages/KSelect/KSelect.spec.js
index 3d70626a49..ed27d50b10 100644
--- a/packages/KSelect/KSelect.spec.js
+++ b/packages/KSelect/KSelect.spec.js
@@ -55,7 +55,7 @@ describe('KSelect', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('renders with correct px width', () => {
+  it('renders with correct px width', async () => {
     const width = 350
 
     const wrapper = mount(KSelect, {
@@ -70,10 +70,10 @@ describe('KSelect', () => {
       }
     })
     const selectedItem = wrapper.find('.k-select')
-    const popover = wrapper.find('.k-select-popover')
+
+    await wrapper.vm.$nextTick()
 
     expect(selectedItem.element.style['width']).toEqual(width + 'px')
-    expect(popover.element.style['width']).toEqual(width + 'px') // 10 pixels less with spacing
   })
 
   it('renders with correct label', () => {
diff --git a/packages/KSelect/KSelect.vue b/packages/KSelect/KSelect.vue
index 430609f1f8..18173d74fb 100644
--- a/packages/KSelect/KSelect.vue
+++ b/packages/KSelect/KSelect.vue
@@ -78,13 +78,15 @@
               color="var(--grey-500)"
               size="15" />
             <KInput
-              :is-open="isToggled"
               :id="selectTextId"
               v-bind="$attrs"
               v-model="filterStr"
-              :placeholder="placeholderText"
+              :readonly="!filterIsEnabled"
+              :is-open="isToggled"
+              :placeholder="selectedItem && appearance === 'select' ? selectedItem.label : placeholderText"
+              :class="{ 'cursor-default': !filterIsEnabled }"
               class="k-select-input"
-              @keyup="triggerFocus(isToggled)" />
+              @keyup="!$attrs.disabled ? triggerFocus(isToggled) : null" />
           </div>
           <template v-slot:content>
             <ul class="k-select-list ma-0 pa-0">
@@ -209,6 +211,13 @@ export default {
       type: Boolean,
       default: false
     },
+    /**
+     * Control whether the input for `select` and `dropdown` appearances supports filtering.
+     */
+    enableFiltering: {
+      type: Boolean,
+      default: null
+    },
     /**
      * Override default filter functionality of case-insensitive search on label
      */
@@ -227,6 +236,7 @@ export default {
 
   data: function () {
     return {
+      inputWidth: 0,
       filterStr: '',
       selectedItem: null,
       selectId: !this.testMode ? uuid.v1() : 'test-select-id-1234',
@@ -242,7 +252,8 @@ export default {
         ...defaultKPopAttributes,
         ...this.kpopAttributes,
         popoverClasses: `${defaultKPopAttributes.popoverClasses} ${this.kpopAttributes.popoverClasses} k-select-pop-${this.appearance}`,
-        width: this.width,
+        width: String(this.inputWidth),
+        maxWidth: String(this.inputWidth),
         disabled: this.$attrs.disabled
       }
     },
@@ -250,24 +261,40 @@ export default {
       return this.$listeners
     },
     widthValue: function () {
-      let w
+      let w = ''
 
       if (!this.width) {
-        w = 200
+        w = '200'
         if (this.appearance === 'button') {
-          w = 230
+          w = '230'
         }
       } else {
         w = this.width
       }
 
-      return w === 'auto' ? w : w + 'px'
+      if (w !== 'auto' && !w.endsWith('%') && !w.endsWith('px')) {
+        w += 'px'
+      }
+
+      return w
     },
     widthStyle: function () {
       return {
         width: this.widthValue
       }
     },
+    filterIsEnabled: function () {
+      if (this.enableFiltering !== null) {
+        // filtering not allowed for `button` appearance
+        return this.appearance === 'button' ? false : this.enableFiltering
+      }
+
+      if (this.appearance === 'dropdown') {
+        return true
+      }
+
+      return false
+    },
     filteredItems: function () {
       return this.filterFunc({ items: this.selectItems, query: this.filterStr })
     },
@@ -278,7 +305,7 @@ export default {
         return this.$attrs.placeholder
       }
 
-      if (this.appearance === 'button') {
+      if (this.appearance === 'button' || !this.filterIsEnabled) {
         return 'Select an item'
       }
 
@@ -311,6 +338,12 @@ export default {
       }
     }
   },
+  mounted () {
+    const inputElem = document.getElementById(this.selectInputId)
+    if (inputElem) {
+      this.inputWidth = inputElem.offsetWidth
+    }
+  },
   methods: {
     handleItemSelect (item) {
       this.selectItems.forEach(anItem => {
@@ -395,6 +428,12 @@ export default {
     width: 100%;
     height: 44px;
 
+    &.cursor-default {
+      input.k-input {
+        cursor: default;
+      }
+    }
+
     input.k-input {
       padding: var(--spacing-xs);
       height: 100%;
diff --git a/packages/KSelect/__snapshots__/KSelect.spec.js.snap b/packages/KSelect/__snapshots__/KSelect.spec.js.snap
index f938b2eb29..1a594dfd82 100644
--- a/packages/KSelect/__snapshots__/KSelect.spec.js.snap
+++ b/packages/KSelect/__snapshots__/KSelect.spec.js.snap
@@ -13,7 +13,7 @@ exports[`KSelect matches snapshot 1`] = `
           <!---->
         </div>
       </div>
-      <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0  k-select-pop-dropdown hide-caret" style="max-width: 350px; display: none;" name="fade">
+      <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0  k-select-pop-dropdown hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
         <!---->
         <div class="k-popover-content">
           <ul class="k-select-list ma-0 pa-0">
@@ -43,7 +43,7 @@ exports[`KSelect renders props when passed 1`] = `
           <!---->
         </div>
       </div>
-      <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0  k-select-pop-dropdown hide-caret" style="max-width: 350px; display: none;" name="fade">
+      <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0  k-select-pop-dropdown hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
         <!---->
         <div class="k-popover-content">
           <ul class="k-select-list ma-0 pa-0">
@@ -86,7 +86,7 @@ exports[`KSelect renders with selected item 1`] = `
           <!---->
         </div>
       </div>
-      <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0  k-select-pop-dropdown hide-caret" style="max-width: 350px; display: none;" name="fade">
+      <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0  k-select-pop-dropdown hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
         <!---->
         <div class="k-popover-content">
           <ul class="k-select-list ma-0 pa-0">
diff --git a/packages/KTable/__snapshots__/KTable.spec.js.snap b/packages/KTable/__snapshots__/KTable.spec.js.snap
index cfd7d232ff..03bfb2148c 100644
--- a/packages/KTable/__snapshots__/KTable.spec.js.snap
+++ b/packages/KTable/__snapshots__/KTable.spec.js.snap
@@ -76,7 +76,7 @@ exports[`KTable default has hover class when passed 1`] = `
 </svg>
 </span></button>
       </div>
-      <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 200px; max-width: 350px; display: none;" name="fade">
+      <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
         <!---->
         <div class="k-popover-content">
           <ul class="k-select-list ma-0 pa-0">
@@ -234,7 +234,7 @@ exports[`KTable sorting should allow disabling sorting 1`] = `
 </svg>
 </span></button>
       </div>
-      <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 200px; max-width: 350px; display: none;" name="fade">
+      <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
         <!---->
         <div class="k-popover-content">
           <ul class="k-select-list ma-0 pa-0">
@@ -342,7 +342,7 @@ exports[`KTable sorting should have sortable class when passed 1`] = `
 </svg>
 </span></button>
       </div>
-      <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 200px; max-width: 350px; display: none;" name="fade">
+      <div id="test-popover-id-1234" role="region" class="k-popover k-select-popover mt-0 undefined k-select-pop-button hide-caret" style="width: 0px; max-width: 0px; display: none;" name="fade">
         <!---->
         <div class="k-popover-content">
           <ul class="k-select-list ma-0 pa-0">
diff --git a/packages/styles/forms/_inputs.scss b/packages/styles/forms/_inputs.scss
index a07589511e..e53f36a237 100644
--- a/packages/styles/forms/_inputs.scss
+++ b/packages/styles/forms/_inputs.scss
@@ -95,24 +95,6 @@
       }
     }
 
-     &:read-only {
-      background-color: var(--KInputReadonlyBackground, var(--grey-100, color(grey-100)));
-      box-shadow: inset 0 0 0 1px var(--KInputBorder, var(--grey-300)) !important;
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      font-style: italic;
-      background-color: var(--KInputDisabledBackground, var(--grey-100, color(grey-100)));
-      box-shadow: inset 0 0 0 1px var(--KInputBorder, var(--grey-300)) !important;
-    }
-
-    &:invalid,
-    &:-moz-submit-invalid,
-    &:-moz-ui-invalid {
-      box-shadow: none;
-    }
-
     /* Browser Overrides */
     &::placeholder {
       color: var(--KInputPlaceholderColor, var(--black-45, color(black-45)));
@@ -125,6 +107,42 @@
     }
   }
 
+  /**
+   * KSelect should ignore read-only styles
+   */
+  :not(.k-select-input) {
+    .k-input,
+    .form-control {
+      &:read-only {
+        background-color: var(--KInputReadonlyBackground, var(--grey-100, color(grey-100)));
+        box-shadow: inset 0 0 0 1px var(--KInputBorder, var(--grey-300)) !important;
+      }
+    }
+  }
+  /**
+   * But KSelect still wants disabled/invalid styles applied
+   * Note: this style-block MUST come AFTER the read-only block. Disabled state
+   *  takes precedence over read-only state.
+   */
+  .k-input,
+  .form-control {
+    &:not([type="checkbox"]),
+    &:not([type="radio"]) {
+      &:disabled {
+        cursor: not-allowed;
+        font-style: italic;
+        background-color: var(--KInputDisabledBackground, var(--grey-100, color(grey-100)));
+        box-shadow: inset 0 0 0 1px var(--KInputBorder, var(--grey-300)) !important;
+      }
+
+      &:invalid,
+      &:-moz-submit-invalid,
+      &:-moz-ui-invalid {
+        box-shadow: none;
+      }
+    }
+  }
+
   &[type="search"] {
     padding-left: 36px;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23000' fill-opacity='.45' fill-rule='evenodd' d='M6 12c-3.3137085 0-6-2.6862915-6-6s2.6862915-6 6-6 6 2.6862915 6 6c0 1.29583043-.410791 2.49571549-1.1092521 3.47653436l1.2305724 1.23057244 2.8232632 2.8338633c.3897175.3911808.3947266 1.0192147.005164 1.4087774-.3868655.3868655-1.014825.3873148-1.4087774-.005164l-2.8338633-2.8232632-1.23057244-1.2305724C8.49571549 11.589209 7.29583043 12 6 12zm4-6c0-2.209139-1.790861-4-4-4S2 3.790861 2 6s1.790861 4 4 4 4-1.790861 4-4z'/%3E%3C/svg%3E");