feat(focus-scope): new component focus-scope component

[Cr0zy07]

Description

Linked Issues

close #268

Additional context

[github-actions]

Thank you for following the naming conventions! 🙏

[productdevbook]

You are great ❤️

[productdevbook]

There is a storybook, can you add that too ?

[productdevbook]

@Cr0zy07 i am same send commit, new struct pnpm dev and pnpm build system. pnpm story same dont change.

[Cr0zy07]

This line is not working properly; it causes an infinite loop, and triggers the warning '[Vue warn]: Maximum recursive updates exceeded.'

As a consequence, unexpected behavior arises within the 'Multiple' and 'WithOptions' stories.

In the 'Multiple' scenario, when both traps are open, clicking on the outer input moves the focus event to it. Meanwhile, in the 'WithOptions' scenario, the 'age' field sometimes got focus, and other times it does not.

Could you please check it @productdevbook

[productdevbook]

infitinite loop test

This is the answer to the question here, I committed it.

  afterEach(() => wrapper.unmount());

age field focus bugs i see. I'm looking after

[Cr0zy07]

The infinite loop that I mentioned was actually in the second watchEffect not in the test. However, I tried two approaches yesterday and it fixed the first issue related to the 'Multiple' story.

watchEffect(async (onInvalidate) => {
  ...
  if (!hasFocusedCandidate) {
    await nextTick()
    ...
  }
 })

or

watchSyncEffect((onInvalidate) => { ... })

Both solutions work, but as I know the second one is unsafe to use.

For the age field focus bug, I was thinking it is because the component has not mounted yet, but even if I changed the v-if to v-show it does not work! :(

[productdevbook]

You were getting this error only in tests, right ? because I never came across it in the browser.

[Cr0zy07]

No, that was in the vue playground. Because when I was running the 'Multiple' story the browser crashed. It was not always crashing, there are steps if you follow the warning message will appear or the browser will crash.

• Open the Trap 1.
• Open the Trap 2.
• Close the Trap 1.
• Reopen the Trap 1.

[Cr0zy07]

Do you mean that by removing the v-if the age field is getting focus?, becouse I tried before with v-show and it doesn't!

v-if is removing the age field from the dom. So, if it works with you, we need to add onMounted to the age ref.

UPDATE

I just remembered that it only works if the form is actually showing, but since v-show does not remove the age field from the dom it should work!

Also, I noticed that the Ridax story does not move the focus from the age field to the first field after toggling the check box, but our does.

[productdevbook]

i am send new commit if

  if (focusOnMount.value !== true) {
    event.preventDefault()
    if (ageFieldRef.value)
      ageFieldRef.value?.focus()
  }

change working but this is not similar to radix.

[Cr0zy07]

I will check it when I reach home. I still need to move the exported type from the beginning of focus-scope file to the utilis file.

[productdevbook]

https://vuejs.org/guide/essentials/reactivity-fundamentals.html#dom-update-timing

[productdevbook]

if you think of something different you can post a new pr

[productdevbook]

thank you ❤️

[productdevbook]

Some of your tests are not working because we passed happy-dom from jsdom. If you can get them working can you post them in the next pr?