search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.55k stars 1.09k forks source link

Picker - Misalignment of dropdown list with react-18 #3923

Closed Mayuri66 closed 2 weeks ago

Mayuri66 commented 1 year ago

🐛 Bug Report

With react 18 upgrade in our code base, we have found that Picker dropdown alignment is not as expected. I have verified the react-spectrum storybook to check if the same issue is here or not and found that its working properly here because spectrum is using react 16. Issue is only happening for react 18 version.

I have tried to replicate the issue with react-16 and react-18. Please find the sandbox link below for both. React 16 : https://codesandbox.io/s/react-spectrum-picker-react16-n0bob7?file=/src/App.js React 18 : https://codesandbox.io/s/react-spectrum-picker-react18-gx7lrg?file=/src/App.js

Steps to replicate :

  1. Minimise the screen size or click on toggle responsive preview (top-right) image
  2. Click on choose frequency dropdown.
  3. With react-16 version , dropdown menu list is adjusting its space in available viewport. But with react-18 , dropdown menu list alignment is always downward, so it is hiding behind the view port.

Expected behaviour :

image

Current behaviour:

image

💁 Possible Solution

🔦 Context

💻 Code Sample

🌍 Your Environment

Software Version(s)
react-spectrum
Browser
Operating System

🧢 Your Company/Team

Adobe Journey Optimizer

🕷 Tracking Issue (optional)

reidbarber commented 1 year ago

The sandboxes you linked use @adobe/react-spectrum version 3.3.0. If you update it to latest 3.24.1, it works as expected.

Mayuri66 commented 1 year ago

@reidbarber , We have upgraded the @adobe/rect-spectrum version to 3.24.1, but still the same issue. Please find the sandbox link - https://codesandbox.io/s/react-spectrum-picker-react18-gx7lrg?file=/src/App.js&resolutionWidth=320&resolutionHeight=665

reidbarber commented 1 year ago

It does look like an issue when you adjust the screen height.

LFDanLu commented 1 year ago

Did some digging, the last time this worked on iPad was d264e8e17f556e661cde86bb3893ff2f93164f8c it seems. 168ca5a5cd53589bae6620fba1602e18240efc46 looks to be the problematic change.

LFDanLu commented 2 weeks ago

I unable to reproduce anymore on latest using https://codesandbox.io/p/sandbox/eloquent-mcclintock-jnphdy?file=%2Fsrc%2FApp.js%3A8%2C62 nor in docs in iPad closing. Feel free to reopen if you are still experiencing issues.