iOS: Select makes the screen irresponsive

[s77rt]

Current Behavior

Rendering <Select /> makes the screen irresponsive to presses (iOS only)

Android	iOS

Expected Behavior

Be able to press on buttons and open the select

Tamagui Version

1.117.0

Platform (Web, iOS, Android)

iOS

Reproduction

function App() {
    return (
        <YStack paddingHorizontal="$4" paddingVertical="$10" gap="$4">
            <Button>Button 1</Button>
            <SelectDemoItem id="select-demo-1" />
            <Button>Button 2</Button>
        </YStack>
    );
}

function SelectDemoItem(props: SelectProps) {
    return (
        <Select value={''} disablePreventBodyScroll {...props}>
            <Select.Trigger iconAfter={ChevronDown}>
                <Select.Value fontWeight={'bold'} placeholder="Something" />
            </Select.Trigger>
            <Adapt when="sm" platform="touch">
                <Sheet
                    native={!!props.native}
                    modal
                    dismissOnSnapToBottom
                    animationConfig={{
                        type: 'timing',
                        duration: 100,
                    }}>
                    <Sheet.Frame>
                        <Sheet.ScrollView>
                            <Adapt.Contents />
                        </Sheet.ScrollView>
                    </Sheet.Frame>
                    <Sheet.Overlay />
                </Sheet>
            </Adapt>
            <Select.Content zIndex={200000}>
                <Select.ScrollUpButton
                    alignItems="center"
                    justifyContent="center"
                    position="relative"
                    width="100%"
                    height="$3">
                    <YStack zIndex={10}>
                        <ChevronUp size={20} />
                    </YStack>
                </Select.ScrollUpButton>

                <Select.Viewport
                    // to do animations:
                    // animation="quick"
                    // animateOnly={['transform', 'opacity']}
                    // enterStyle={{ o: 0, y: -10 }}
                    // exitStyle={{ o: 0, y: 10 }}
                    minWidth={200}>
                    <Select.Group>
                        <Select.Label>Fruits</Select.Label>
                        {/* for longer lists memoizing these is useful */}
                        {React.useMemo(
                            () =>
                                [{name: 'test'}].map((item, i) => {
                                    return (
                                        <Select.Item
                                            index={i}
                                            key={item.name}
                                            value={item.name.toLowerCase()}>
                                            <Select.ItemText>
                                                {item.name}
                                            </Select.ItemText>
                                            <Select.ItemIndicator marginLeft="auto">
                                                <Check size={16} />
                                            </Select.ItemIndicator>
                                        </Select.Item>
                                    );
                                }),
                            [],
                        )}
                    </Select.Group>
                    {/* Native gets an extra icon */}
                    {props.native && (
                        <YStack
                            position="absolute"
                            right={0}
                            top={0}
                            bottom={0}
                            alignItems="center"
                            justifyContent="center"
                            width={'$4'}
                            pointerEvents="none">
                            <ChevronDown
                                size={getFontSize(
                                    (props.size as FontSizeTokens) ?? '$true',
                                )}
                            />
                        </YStack>
                    )}
                </Select.Viewport>

                <Select.ScrollDownButton
                    alignItems="center"
                    justifyContent="center"
                    position="relative"
                    width="100%"
                    height="$3">
                    <YStack zIndex={10}>
                        <ChevronDown size={20} />
                    </YStack>
                </Select.ScrollDownButton>
            </Select.Content>
        </Select>
    );
}

System Info

System:
    OS: macOS 14.1.2
    CPU: (12) arm64 Apple M2 Pro
    Memory: 75.86 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
    Watchman: 2024.08.26.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 131.0.6778.86
    Safari: 17.1.2
  npmPackages:
    @babel/core: ^7.25.2 => 7.26.0 
    @babel/plugin-proposal-export-namespace-from: ^7.18.9 => 7.18.9 
    @babel/preset-env: ^7.25.3 => 7.26.0 
    @babel/runtime: ^7.25.0 => 7.26.0 
    @lottiefiles/dotlottie-react: ^0.6.5 => 0.6.5 
    @react-native-community/cli: 15.0.1 => 15.0.1 
    @react-native-community/cli-platform-android: 15.0.1 => 15.0.1 
    @react-native-community/cli-platform-ios: 15.0.1 => 15.0.1 
    @react-native/babel-preset: 0.76.2 => 0.76.2 
    @react-native/eslint-config: 0.76.2 => 0.76.2 
    @react-native/metro-config: 0.76.2 => 0.76.2 
    @react-native/typescript-config: 0.76.2 => 0.76.2 
    @react-navigation/bottom-tabs: ^7.0.5 => 7.0.5 
    @react-navigation/elements: ^2.0.3 => 2.0.4 
    @react-navigation/native: ^7.0.3 => 7.0.3 
    @react-navigation/native-stack: ^7.0.3 => 7.0.3 
    @shopify/flash-list: ^1.7.2 => 1.7.2 
    @tamagui/babel-plugin: ^1.117.0 => 1.117.0 
    @tamagui/cli: ^1.117.0 => 1.117.0 
    @tamagui/config: ^1.117.0 => 1.117.0 
    @tamagui/lucide-icons: ^1.117.0 => 1.117.0 
    @types/react: ^18.2.6 => 18.3.12 
    @types/react-native-web: ^0.19.0 => 0.19.0 
    @types/react-test-renderer: ^18.0.0 => 18.3.0 
    @vue/preload-webpack-plugin: ^2.0.0 => 2.0.0 
    babel-jest: ^29.6.3 => 29.7.0 
    babel-loader: ^9.2.1 => 9.2.1 
    babel-plugin-react-native-web: ^0.19.13 => 0.19.13 
    eslint: ^8.19.0 => 8.57.1 
    eslint-plugin-react-compiler: ^19.0.0-beta-a7bf2bd-20241110 => 19.0.0-beta-a7bf2bd-20241110 
    html-webpack-plugin: ^5.6.3 => 5.6.3 
    jest: ^29.6.3 => 29.7.0 
    lottie-react-native: ^7.1.0 => 7.1.0 
    prettier: 2.8.8 => 2.8.8 
    process: ^0.11.10 => 0.11.10 
    react: 18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    react-native: 0.76.2 => 0.76.2 
    react-native-reanimated: ^3.16.1 => 3.16.1 
    react-native-safe-area-context: ^4.14.0 => 4.14.0 
    react-native-screens: ^4.1.0 => 4.1.0 
    react-native-svg: ^15.9.0 => 15.9.0 
    react-native-web: ^0.19.13 => 0.19.13 
    react-test-renderer: 18.3.1 => 18.3.1 
    tamagui: ^1.117.0 => 1.117.0 
    tamagui-loader: ^1.117.0 => 1.117.0 
    typescript: 5.0.4 => 5.0.4 
    url-loader: ^4.1.1 => 4.1.1 
    webpack: ^5.96.1 => 5.96.1 
    webpack-cli: ^5.1.4 => 5.1.4 
    webpack-dev-server: ^5.1.0 => 5.1.0

[jakejdavis]

I got this issue also when upgrading to new architecture.

[vitalyiegorov]

same here, select is not working after upgrade to EXPO 52, when <Adapt ...> is removed you can continue using the app, but Select does not work.