fix(drawer): solve the focus caused element jump bug #3703 #4609
Conversation
|
Keep the examples document for now. We will open source all documents soon Can it be solved by |
| @@ -142,7 +142,7 @@ const Drawer = defineComponent({ | |||
| methods: { | |||
| domFocus() { | |||
| if (this.dom) { | |||
| this.dom.focus(); | |||
| this.dom.focus({ preventScroll: true }); | |||
There was a problem hiding this comment.
Is it better to change to setTimeout where domFocus is triggered?
There was a problem hiding this comment.
I tried, it actually work. Given we found the root cause is calling focus on invisible element without preventScroll, we can fix it by
- pass
preventScrolltofocus - or guarantee element appeared in viewport before
focuscalled, so yessetTimeoutwould do the job, but I'm not sure will it cause any other side effects.
And I personally always consider setTimeout to be the last resort to resolve issues if you have any other options.
There was a problem hiding this comment.
you are right. but preventScroll will cause breaking change( we need scrollIntoView).
For 2.x, we can use setTimeout resolve it . we will refactor render logic in v3.x.
|
This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
First of all, thank you for your contribution! 😄
New feature please send pull request to feature branch, and rest to master branch. Pull request will be merged after one of collaborators approve. Please makes sure that these form are filled before submitting your pull request, thank you!
[中文版模板 / Chinese template]
This is a ...
What's the background?
This PR is mainly about two issues.
Fix a long existing bug caused by
focusSolve the
focuscaused element jump first time drawer opening, there is an issue concerning this bug #3703 .visibletotrue, which will callrendertwice(maybe another issue needs to be solved). After the first callling drawer is not truly shown in container(getChildToRender called by false), but domFocus is triggered and called.focuson an invisible element? Please refer to this codepen.focusinternally calledscrollIntoViewIfNeeded, that's why the element jump weirdly, unless you pass{ preventScroll: true}tofocusas parameter.And this example don't have to implemented in that tricky way.
Add
examplesfolder to.gitignoreMaybe every maintainer write different example code temporary, don't have to commit that every time, keep in local machine would be better.