fix(kselect): trigger popover to redraw

Kong · Aug 9, 2022 · 4f83f83 · 4f83f83
1 parent 5c54e33
commit 4f83f83
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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()
           })
         }
       },