@eturnity/eturnity_reusable_components 9.37.9-ATE-23.1 → 9.37.10

package/dist/index.es3.js

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

package/package.json

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

package/src/assets/theme.js

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

package/src/components/tableDropdown/index.vue

@@ -587,7 +587,9 @@
           )
           this.$emit('dropdown-search', '')
           this.$nextTick(() => {
-            this.focusSearchInput()
+            this.$refs.searchInput.$el.children[0].children[0].focus()
+          })
+          this.$nextTick(() => {
             this.scrollToItem()
           })
         }
@@ -630,7 +632,13 @@
             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',
@@ -646,10 +654,6 @@
           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,6 +1,5 @@
 /* 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'
@@ -59,9 +58,7 @@ 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)
@@ -133,74 +130,6 @@ 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 })