InputAcessoryView section (bar with tabbing arrown and Done button) autoclose onChangeValue IOS

[ihorkolucky]

Describe the bug

InputAcessoryView section (bar with tabbing arrown and Done button) autoclose onChangeValue event in IOS

To Reproduce

Steps to reproduce the behavior:

use simple code example from the package page:

import { Text, SafeAreaView, StyleSheet, View, TouchableOpacity } from 'react-native';
import React, { Fragment, useEffect, useState } from 'react';

import RNPickerSelect from 'react-native-picker-select';

export default function App() {
  const [tab, setTab] = useState("tab1");
  const [sport, setSport] = useState("");

  const Tab1 = () => {
    return (
      <View>
        <Text>Tab1</Text>
        <Text>{sport}</Text>
        <RNPickerSelect
          onValueChange={(value) => setSport(value)}
          items={[
          { label: 'Football', value: 'football' },
          { label: 'Baseball', value: 'baseball' },
          { label: 'Hockey', value: 'hockey' },
          ]}
        />

      </View>
    )
  }
  const Tab2 = () => {
    return (
      <View>
        <Text>Its tab #2</Text>
      </View>
    )
  }
  const renderSelectedTab = () => {
    switch (tab) {
      case 'tab1':
        return <Tab1 />;
      case 'tab2':
        return <Tab2 />;
      default: 
        return <Tab1/>
    }
  }


  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => setTab('tab1')}>
        <Text>Set Tab 1</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => setTab('tab2')}>
        <Text>Set Tab 2</Text>
      </TouchableOpacity>
      {renderSelectedTab()}
    </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 300,
  },
  
});

1. Click on dropdown
2. InputAcessoryView section appears, choose/scroll any other element
3. Element choosen but panel auto disappears

Expected behavior

Panel should be visible until click on Done button

Screenshots

"n/a".

Additional details

• Device: [any. iPhone]
• OS: [any. iOS]
• react-native-picker-select version: [8.0.1]
• react-native version: [any/last]
• expo sdk version: [any/last or n/a]

Reproduction and/or code sample

https://snack.expo.dev/dgrQsMn4hJT8IDkxttNNb

[daniele-mc]

I have the same issue

[ihorkolucky]

The roblem is with calling rendering components, it works if you call it as a function but not a component:

const renderSelectedTab = () => {
    switch (tab) {
      case 'tab1':
        return Tab1();
      case 'tab2':
        return Tab2();
      default: 
        return Tab1()
    }
  }

Working example:
https://snack.expo.dev/_JKVeUyTa14KKKoTBi7Ru