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.

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

Autocomplete does not show options in external window #3439

Closed
TormodNy opened this issue May 14, 2024 · 4 comments
Closed

Autocomplete does not show options in external window #3439

TormodNy opened this issue May 14, 2024 · 4 comments
Labels
🐛 bug Something isn't working

Comments

@TormodNy
Copy link

Describe the bug

I want to open part of my application in a new external window with an Autocomplete component. However, when opening the Autocomplete in the external window, the options do not appear until I have hovered over the original window with the cursor.

Steps to reproduce the bug

  1. Open codesandbox
  2. Open preview in a separate tab (this seems to work fine in the normal preview in codesandbox, but it fails everywhere else I have tested it)
    image
  3. Click Open window button
  4. Click the Autocomplete to open it and see that there are no options
    image
  5. Hover over the original window and the options should appear
    image

Expected behavior

I expect all options to show when I open the Autocomplete, not when I hover over the original window

Specifications

  • Version: 0.37.0
  • Browser: Chrome
  • OS: Windows

Additional context
https://codesandbox.io/p/sandbox/2023-05-05-eds-accordion-styling-forked-ktp277?file=%2Fsrc%2FApp.tsx%3A11%2C20l

@TormodNy TormodNy added the 🐛 bug Something isn't working label May 14, 2024
@oddvernes
Copy link
Collaborator

Would you mind testing this with the new version of eds-core-react? We did a bunch of stuff to autocomplete so perhaps it randomly works now. Otherwise this seems like a quite unusual setup for eds so I am not sure how much could be done, although I will take a closer look at this when I have time 👍

@TormodNy
Copy link
Author

Yes, it is definitely an unusual setup 🙃

Upgrading to the newest version makes it so that the options show above the autocomplete overflowing the window:
image
I still have to hover over the original window to load the options. Could it be the virtualization that is not loading properly?

I also tried with a MUI Autocomplete which works similarly to the tooltips in #3440. The options show as expected in the window, but there are some issues with the styling.

@oddvernes
Copy link
Collaborator

If you set height: 100% on html and min-height: 100% on body in the external window the options should show below, i think the viewport is otherwise only the height of the autocomplete input, and floating-ui is doing hit detection against viewport

@oddvernes
Copy link
Collaborator

I believe this has been resolves as best it can, closing issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants