@eturnity/eturnity_reusable_components 9.37.10 → 9.40.0

package/dist/index.es3.js

@@ -468,7 +468,7 @@ const theme = (() => {
           main: {
             // variant: this is the default variant
             default: {
-              backgroundColor: "transparent",
+              backgroundColor: colors.white,
               textColor: semanticColors.purple[500],
               borderColor: "",
               iconBackgroundColor: semanticColors.buttonIcon.none

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.37.10",
+  "version": "9.40.0",
   "files": [
     "dist",
     "src"

package/src/assets/theme.js

@@ -469,7 +469,7 @@ const theme = (() => {
           main: {
             // variant: this is the default variant
             default: {
-              backgroundColor: 'transparent',
+              backgroundColor: colors.white,
               textColor: semanticColors.purple[500],
               borderColor: '',
               iconBackgroundColor: semanticColors.buttonIcon.none,

package/src/components/tableDropdown/index.vue

@@ -587,9 +587,7 @@
           )
           this.$emit('dropdown-search', '')
           this.$nextTick(() => {
-            this.$refs.searchInput.$el.children[0].children[0].focus()
-          })
-          this.$nextTick(() => {
+            this.focusSearchInput()
             this.scrollToItem()
           })
         }
@@ -632,13 +630,7 @@
             CLICK_OUTSIDE_CAPTURE
           )
           this.$emit('dropdown-search', '')
-          this.$nextTick(() => {
-            this.scrollToItem()
-          })
           this.$emit('toggle-dropdown-open', { close: false })
-          this.$nextTick(() => {
-            this.$refs.searchInput.$el.children[0].children[1].focus()
-          })
         } else {
           document.removeEventListener(
             'click',
@@ -654,6 +646,10 @@
           this.toggleOpen()
         }
       },
+      focusSearchInput() {
+        const input = this.$refs.searchInput?.$el.querySelector('input')
+        input?.focus({ preventScroll: true })
+      },
       scrollToItem() {
         if (this.$refs.optionsContainer) {
           this.$refs.optionsContainer.$el.scrollIntoView({

package/src/components/tableDropdown/tableDropdown.spec.js

@@ -1,5 +1,6 @@
 /* eslint-disable */
 import { mount } from '@vue/test-utils'
+import { h, nextTick, ref } from 'vue'
 import TableDropdown from './index.vue'
 import SearchInput from '@/components/inputs/searchInput'
 import InputText from '@/components/inputs/inputText'
@@ -58,7 +59,9 @@ describe('TableDropdown', () => {
 
     it('renders a template link with the value for a filled template item', () => {
       const wrapper = mountDropdown({
-        tableItems: [{ type: 'template', value: 'My Template', row: { id: 2 } }],
+        tableItems: [
+          { type: 'template', value: 'My Template', row: { id: 2 } },
+        ],
       })
       expect(wrapper.text()).toContain('My Template')
       expect(wrapper.findComponent(MainButton).exists()).toBe(false)
@@ -130,6 +133,74 @@ describe('TableDropdown', () => {
     })
   })
 
+  describe('opening: focus and scroll', () => {
+    let scrollIntoView
+    let focus
+
+    // The dropdown lives in a parent that owns `isOpen`, so one click runs both
+    // toggleOpen and the isOpen watcher, exactly as it does in the app.
+    const mountControlled = (props = {}) => {
+      const isOpen = ref(false)
+      return mount({
+        setup() {
+          return () =>
+            h(TableDropdown, {
+              colSpan: 2,
+              tableItems: [{ type: 'text', value: 'Selected Item' }],
+              optionItems: [
+                { display_name: 'Item 1', company_item_number: '123' },
+                { display_name: 'Item 2', company_item_number: '456' },
+              ],
+              optionsDisplay: ['display_name', 'company_item_number'],
+              ...props,
+              isOpen: isOpen.value,
+              onToggleDropdownOpen: ({ close }) => {
+                isOpen.value = !close
+              },
+            })
+        },
+      })
+    }
+
+    const open = async (wrapper) => {
+      await wrapper.findComponent(TableDropdown).trigger('click')
+      await nextTick()
+      await nextTick()
+    }
+
+    beforeEach(() => {
+      scrollIntoView = jest.fn()
+      Element.prototype.scrollIntoView = scrollIntoView
+      focus = jest.spyOn(HTMLInputElement.prototype, 'focus')
+    })
+
+    afterEach(() => {
+      focus.mockRestore()
+    })
+
+    it('focuses the search input without letting focus scroll the page', async () => {
+      const wrapper = mountControlled()
+      await open(wrapper)
+
+      expect(focus).toHaveBeenCalledTimes(1)
+      expect(focus).toHaveBeenCalledWith({ preventScroll: true })
+      expect(focus.mock.instances[0]).toBe(
+        wrapper.findComponent(SearchInput).find('input').element
+      )
+    })
+
+    it('scrolls the options container into view once, smoothly', async () => {
+      const wrapper = mountControlled()
+      await open(wrapper)
+
+      expect(scrollIntoView).toHaveBeenCalledTimes(1)
+      expect(scrollIntoView).toHaveBeenCalledWith({
+        behavior: 'smooth',
+        block: 'center',
+      })
+    })
+  })
+
   describe('interactions', () => {
     it('emits toggle-dropdown-open with close:true when an open row is clicked', async () => {
       const wrapper = mountDropdown({ isOpen: true })