Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Handle click outside with floating dropdown #3577

Closed
m0ksem opened this issue Jul 7, 2023 · 3 comments · Fixed by #3578
Closed

Handle click outside with floating dropdown #3577

m0ksem opened this issue Jul 7, 2023 · 3 comments · Fixed by #3578
Assignees
@m0ksem
Labels
BUG Something isn't working

Comments

@m0ksem
Copy link
Collaborator

m0ksem commented Jul 7, 2023

Right now floating drop-down teleports Dom elements to the body.

body
  .va-modal
  .va-dropdown

useClickOutside must handle .va-dropdown as if it inside .va-modal actually.

Possible solution:
add data attribute to floating elements (data-va-teleported-[hash]) and it's actual parent (data-va-teleport-from-[hash]). Then click outside can find where actually drop-down must be rendered, without teleport.
You can find useUuid or something like this to get component instance uuid.
@m0ksem m0ksem added the BUG Something isn't working label Jul 7, 2023
@m0ksem m0ksem self-assigned this Jul 7, 2023
@m0ksem m0ksem mentioned this issue Jul 7, 2023
Closed
m0ksem added a commit to m0ksem/vuestic-ui that referenced this issue Jul 7, 2023
@m0ksem
fix(epicmaxco#3577): introduce useTeleported composable
68b2886
@m0ksem m0ksem mentioned this issue Jul 7, 2023
Merged
m0ksem added a commit that referenced this issue Jul 7, 2023
@m0ksem
fix(#3577): introduce useTeleported composable (#3578)
b1bfae0 
* fix(#3577): introduce useTeleported composable

* chore(docs): update modal demo

* fix(time-input): open on click

* chore(docs): change button in example to primary

* fix(dropdown): close on keyboard only focus outside
@github-project-automation github-project-automation bot moved this from Backlog to Done in Vuestic Dashboard Jul 7, 2023
@m0ksem m0ksem moved this from Done to Approved in Vuestic Dashboard Jul 7, 2023
@Bond-Addict
Copy link
Contributor

@m0ksem when should this fix be available?

Thanks

@m0ksem
Copy link
Collaborator Author

m0ksem commented Jul 7, 2023

@m0ksem when should this fix be available?

Thanks

Should be available now in 1.7.1

@Bond-Addict
Copy link
Contributor

@m0ksem I just tested and everything looks great! The auto close for the date input even works!

Thanks for the super quick turn around! 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@m0ksem m0ksem

Labels
BUG Something isn't working
Projects
Vuestic Dashboard
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(#3577): introduce useTeleported composable m0ksem/vuestic-ui
2 participants
@m0ksem @Bond-Addict