search

akveo / react-native-ui-kitten

:boom: React Native UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode
https://akveo.github.io/react-native-ui-kitten/
MIT License
10.3k stars 952 forks source link

Select dropdown is positioned incorrectly when scrolling #1071

Open colinhostetter opened 4 years ago

colinhostetter commented 4 years ago

🐛 Bug Report

On web, when the page is scrolled to the top, the Dropdown component works as expected. However, when the dropdown is opened while the page is scrolled down a bit, the items appear in the wrong place; they're positioned too high on the page. There's also a similar bug with the Tooltip component.

To Reproduce

See example here: https://snack.expo.io/rrdVu5obV

When you click the dropdown while scrolled to the top, it works properly. However, if you scroll down a little and then click it, the items will appear way above where they're supposed to.

Expected behavior

Dropdown items should appear just below the main UI element.

Link to runnable example or repository (highly encouraged)

https://snack.expo.io/rrdVu5obV

UI Kitten and Eva version

Package Version
@eva-design/eva 2.0.0-alpha.1
@ui-kitten/components 5.0.0-alpha.1

Environment information

 System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
  Binaries:
    Node: 12.13.0 - /usr/local/bin/node
    Yarn: 1.22.4 - ~/.yarn/bin/yarn
    npm: 6.12.0 - /usr/local/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6392135
    Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
  npmPackages:
    react: ~16.9.0 => 16.9.0
    react-native: https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz => 0.61.4
artyorsh commented 4 years ago

@colinhostetter works as expected on mobile. And worked same way on previous RNW versions. Could it be RNW issue?

colinhostetter commented 4 years ago

Hey @artyorsh thanks for replying! I'm not sure if it's a RNW thing -- when I switch to the previous version of Expo in the link I gave, it is still broken. (Not sure if that would switch it to a previous RN version or not.)

Any idea whether someone will be able to look into this? Unfortunately it does make the Dropdown and Tooltip components unusable for projects that are using web.

artyorsh commented 4 years ago

@colinhostetter We have a demo app running RNW. Please see Select component examples in the Components tab. It runs Expo SDK 36 + RNW 0.11.7, so I can definitely say this is an issue on the other side (or the change that we could miss)

colinhostetter commented 4 years ago

@artyorsh I'm also using RNW 0.11.7, which makes me think it's not an RNW issue. Maybe something differing in our setups?

colinhostetter commented 4 years ago

After noticing that your example is within a ScrollView or some other kind of scrollable container, I tried moving mine into one, and it seems to work there: https://snack.expo.io/tkV3YMQ2x

So this appears to be a ui-kitten bug when this component is rendered outside of a ScrollView.

artyorsh commented 4 years ago

@colinhostetter any purpose of using flex: 1 there? https://snack.expo.io/Wppfwfejh

colinhostetter commented 4 years ago

Ok, I guess it's not specific to ScrollView, but it's rather that the bug happens when the actual document itself is scrolled (as in my original example) rather than scrolling within an element (as in your example and my second example).

colinhostetter commented 4 years ago

I guess the flex: 1 is not necessary, no

artyorsh commented 4 years ago

@colinhostetter we focus mobile-first, where is no option to scroll without putting contents somewhere else besides ScrollView. Could you please describe your use-case (without having a ScrollView) in more details?

colinhostetter commented 4 years ago

Yep, makes sense. I'm actually pretty new to mobile development and was prototyping this stuff on web and hadn't built out how things like scrolling should work in my app on mobile, and there was no obvious reason to think that that had anything to do with this problem. It seems like just using ScrollViews should resolve the problem, although it is very confusing, so it might be worth fixing for future newcomers like me.

artyorsh commented 4 years ago

@1ET it's not the same. See #743

ianmartorell commented 3 years ago

I just found this bug while developing an application for both mobile and web, and it's quite annoying. On web, scrolling the document body instead of a ScrollView is a really good practice, as is what most browsers will expect and behave accordingly, especially mobile browsers like Safari on iOS, which will hide the URL bar and the bottom action buttons to give more space to the user when scrolling down the page, and show them again when scrolling up. If we build our web applications using a ScrollView instead of letting the document body scroll, the browser won't be able to detect scroll interactions, resulting in a weird user experience. Other weird bugs will happen as well, like accidental scrolling of the document instead of the inner ScrollView which will make the user think the page cannot be scrolled further, when in reality it can.

Although UI Kitten is mobile first, it's the UI kit for RN with the best web support out there, so it pains me to see document body scrolling not supported. Is there any chance this could be worked on, or could I be pointed in the right direction if I have the time to contribute with a fix myself?

ianmartorell commented 3 years ago

@artyorsh sorry for pinging you, could you comment on this? Thank you