When having a selected value, focussing the field which is lower than the top scroll causes the X mark and dropdown items to pop up at the top of the scrollview

[Rubenvdveen]

When having a selected value once, focussing the field which is lower than the top scroll causes the X mark and dropdown items to pop up at the top of the scrollview.

Image how it's supposed to work:

Image after selecting a value once and re-focussing:

[RichardLindhout]

Do you have body scroll? You can't have body scroll in React Native Web apps

[RichardLindhout]

You should use it inside a

<ScrollView></ScrollView> 

[RichardLindhout]

Hmm I have the same problem now :-D

[RichardLindhout]

Nevermind, it was because expo does allow body scroll by default. You should be fine by something like this in your css

body,html,#root{min-height:100%;height:100%;max-height:100%;overflow:hidden;}

And use a ScrollView for the elements

[RichardLindhout]

For expo users, wrap your whole app in a custom View

export default function App() {
  return (
    <View
      style={
        Platform.OS === 'web' ? { flex: 1, maxHeight: '100vh' } : { flex: 1 }
      }
    >
      <PaperProvider>
        <AppInner />
      </PaperProvider>
    </View>
  );
}

[RichardLindhout]

Please update to v0.2.0, I think I fixed the issue you are describing by recalculating the position if the user clicks the element

[Rubenvdveen]

Thanks for the updates, it seems to work fine using a scrollview and the View wrapped around the App component, but there is one new problem now:

When having the autocomplete focussed, it's impossible to scroll.

Video: https://youtu.be/0yGnSWfeleM