feat(focus-scope): new component focus-scope component#272
Conversation
|
Thank you for following the naming conventions! 🙏 |
|
You are great ❤️ |
|
There is a storybook, can you add that too ? |
|
@Cr0zy07 i am same send commit, new struct pnpm dev and pnpm build system. |
| // we need to remove the listener after we `dispatchEvent` | ||
| container.value?.$el.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus) | ||
|
|
||
| // focusScopesStack.remove(focusScope) |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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! :(
There was a problem hiding this comment.
You were getting this error only in tests, right ? because I never came across it in the browser.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
There was a problem hiding this comment.
if you think of something different you can post a new pr
productdevbook
changed the title
|
Some of your tests are not working because we passed |
2 participants
Description
Linked Issues
close #268
Additional context