Select demo doesn't show the dropdown on macOS Safari 15.5

[digitall-it]

Describe the bug Demo page for select doesn't work on macOS Safari 15.5. The select boxes are clearable but will not show the dropdown. No error is reported in the console.

To Reproduce Steps to reproduce the behavior:

1. Go to livewire-wireui.com/docs/select
2. Click on a select box

Expected behavior A dropdown appears on screen.

Screenshots N/A

Desktop (please complete the following information):

• OS: macOS Monterey 12.4
• Browser Safari
• Version 15.5

Additional context Livewire component works correctly in Google Chrome for macOS on the same machine.

[EthosLuke]

This also affects Firefox on Windows & macOS - the dropdown is displayed on the page however it goes directly to the top of the page instead of within view where expected.

This seems to be a bug as part of the addition to show the popover either above or below component depending on what has more space... Works fine in MS Edge but causes problems in other browsers.

The original position of the popover when clicking on the "Simple Options" dropdown is at the top of the screen

And if you scroll past the dropdown, the popover will move to correct position below the dropdown but it doesn't do this until the dropdown is out of view:

[EthosLuke]

I've submitted a pull request on #360 - the inline-styles on the popover only supported webkit browsers

[cbaconnier]

It appear that the dropdown is not showing at all for me since the version 1.8

• Firefox & Google Chrome
• Linux (Manjaro i3)
• There's no error in the console
• Doesn't work with an array of option, async data, with or without wire:model
• I haven't found case where its working
• I'm using vite

I ran composer update && php artisan cache:clear && php artisan view:clear && npm run build

I tried the PR #360 but it doesn't not fix the issue for me.

Also, this page doesn't work on Firefox on my machine https://livewire-wireui.com/docs/select

[EthosLuke]

It appear that the dropdown is not showing at all for me since the version 1.8

* Firefox & Google Chrome

* Linux (Manjaro i3)

* There's no error in the console

* Doesn't work with an array of option, async data, with or without `wire:model`

* I haven't found case where its working

* I'm using vite

I ran composer update && php artisan cache:clear && php artisan view:clear && npm run build

I tried the PR #360 but it doesn't not fix the issue for me.

Also, it doesn't work on this page https://livewire-wireui.com/docs/select

Could you please try clearing your browser cache after setting up PR #360

[cbaconnier]

Could you please try clearing your browser cache after setting up PR #360

I did clear the cache and also tried in private navigation.

I could replicate the issue described by @EthosLuke with the PR #360 on Google Chrome and Firefox. But it seem to differs based on breakpoints.

[EthosLuke]

Could you please try clearing your browser cache after setting up PR #360

I did clear the cache and also tried in private navigation.

I could replicate the issue described by @EthosLuke with the PR #360 on Google Chrome and Firefox. But it seem to differs based on breakpoints.

Seems you don't have most recent commit from #360 - please check: https://github.com/wireui/wireui/pull/360/commits/284dee844ee2efc522835f14259681e6a5d11ada

[cbaconnier]

@EthosLuke Oops right, sorry! 😳

I did a copy/past to be faster and didn't notice the class changes. So yes, it does the fix!

[PH7-Jack]

@EthosLuke made a fix for it. Thanks a lot. @digitall-it @cbaconnier Update to the latest version