From 4f83f8325da3f5237dd3c5d47c3121184f5c38a7 Mon Sep 17 00:00:00 2001
From: Adam DeHaven <adam.dehaven@konghq.com>
Date: Tue, 9 Aug 2022 12:43:00 -0400
Subject: [PATCH] fix(kselect): trigger popover to redraw

---
 packages/KPop/KPop.vue           | 8 +++++++-
 packages/KSelect/KSelect.spec.js | 9 +++++----
 packages/KSelect/KSelect.vue     | 8 ++++----
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/KPop/KPop.vue b/packages/KPop/KPop.vue
index 641be4107b..b5bbac85af 100644
--- a/packages/KPop/KPop.vue
+++ b/packages/KPop/KPop.vue
@@ -339,6 +339,12 @@ export default {
       this.$emit('opened')
     },
 
+    updatePopper () {
+      if (this.popper && typeof this.popper.update === 'function') {
+        this.popper.update()
+      }
+    },
+
     async createInstance () {
       // destroy any previous poppers before creating new one
       this.destroy()
@@ -369,7 +375,7 @@ export default {
       })
 
       await this.$nextTick()
-      this.popper.update()
+      this.updatePopper()
     },
 
     handleClick (e) {
diff --git a/packages/KSelect/KSelect.spec.js b/packages/KSelect/KSelect.spec.js
index 51242f34fd..0c2ff11697 100644
--- a/packages/KSelect/KSelect.spec.js
+++ b/packages/KSelect/KSelect.spec.js
@@ -219,13 +219,12 @@ describe('KSelect', () => {
 
   it('works in autosuggest mode', async () => {
     const onQueryChange = jest.fn()
-    const items = []
     const wrapper = mount(KSelect, {
       propsData: {
         testMode: true,
         autosuggest: true,
         loading: false,
-        items
+        items: []
       },
       listeners: {
         'query-change': onQueryChange
@@ -241,8 +240,10 @@ describe('KSelect', () => {
     await tick(wrapper.vm, 1)
     expect(wrapper.find('[data-testid="k-select-loading"]').exists()).toBe(true)
 
-    items.push({ label: 'Label 1', value: 'label1' })
-    wrapper.setProps({ loading: false })
+    const items = [{ label: 'Label 1', value: 'label1' }]
+
+    await tick(wrapper.vm, 1)
+    wrapper.setProps({ items, loading: false })
     await tick(wrapper.vm, 1)
     expect(wrapper.find('[data-testid="k-select-loading"]').exists()).toBe(false)
     expect(wrapper.find('[data-testid="k-select-item-label1"]').html()).toEqual(expect.stringContaining('Label 1'))
diff --git a/packages/KSelect/KSelect.vue b/packages/KSelect/KSelect.vue
index ff07abefea..3bdc598cf7 100644
--- a/packages/KSelect/KSelect.vue
+++ b/packages/KSelect/KSelect.vue
@@ -34,6 +34,7 @@
       </div>
       <KToggle v-slot="{toggle, isToggled}">
         <KPop
+          ref="popper"
           v-bind="boundKPopAttributes"
           :on-popover-click="() => {
             toggle()
@@ -423,12 +424,11 @@ export default {
           }
         }
 
-        // Trigger a fake scroll event on props.item change to cause the popover to redraw
+        // Trigger an update to the popper element to cause the popover to redraw
         // This prevents the popover from displaying "detached" from the KSelect
-        if (typeof window !== 'undefined') {
+        if (this.$refs.popper && typeof this.$refs.popper.updatePopper === 'function') {
           this.$nextTick(() => {
-            window.scrollTo(window.scrollX, window.scrollY - 1)
-            window.scrollTo(window.scrollX, window.scrollY + 1)
+            this.$refs.popper.updatePopper()
           })
         }
       },