Debug

src/components/ActionButton/ActionButton.vue

@@ -40,7 +40,7 @@ This component is made to be used inside of the [Actions](#Actions) component sl
  </template>
  Delete and close
  </ActionButton>
- <ActionButton :close-after-click="true" @click="focusInput()">
+ <ActionButton :close-after-click="true" @click="focusInput">
  <template #icon>
  <Plus :size="20" />
  </template>

src/components/Popover/Popover.vue

@@ -152,33 +152,33 @@ export default {
  /**
  * Add focus trap for accessibility.
  */
- useFocusTrap() {
- this.$nextTick(() => {
- if (!this.focusTrap) {
- return
- }
+ async useFocusTrap() {
+ await this.$nextTick()
 
- const el = this.$refs.popover?.$refs.popperContent?.$el
+ if (!this.focusTrap) {
+ return
+ }
 
- if (!el) {
- return
- }
+ const el = this.$refs.popover?.$refs.popperContent?.$el
+
+ if (!el) {
+ return
+ }
 
- this.$focusTrap = createFocusTrap(el, {
- // Prevents to lose focus using esc key
- // Focus will be release when popover be hide
- escapeDeactivates: false,
- allowOutsideClick: true,
- })
- this.$focusTrap.activate()
+ this.$focusTrap = createFocusTrap(el, {
+ // Prevents to lose focus using esc key
+ // Focus will be release when popover be hide
+ escapeDeactivates: false,
+ allowOutsideClick: true,
  })
+ this.$focusTrap.activate()
  },
  /**
  * Remove focus trap
  *
  * @param {object} options The configuration options for focusTrap
  */
- async clearFocusTrap(options = {}) {
+ clearFocusTrap(options = {}) {
  try {
  this.$focusTrap?.deactivate(options)
  this.$focusTrap = null