bamlab / react-tv-space-navigation

A React Native module to handle spatial navigation for a TV application in a 100% cross-platform way
https://bamlab.github.io/react-tv-space-navigation/
MIT License
178 stars 15 forks source link

input field focus is not move from input field in TVOS #140

Open ionictest2017 opened 1 week ago

ionictest2017 commented 1 week ago

**Describe the bug when I move focus from text input to card it shows to traverse on card but whenever I click on it then the keyboard opens it means focus is still present on the input field, this issue is only present on Apple TV and other platforms are working perfectly To Reproduce**

 <Page>
        <DefaultFocus>
          <View style={styles.container}>
          {isLoading && <Loader />}
            <SpatialNavigationVirtualizedGrid
              data={gridData}
              header={
                <View style={styles.searchContainer}>
                  <DefaultFocus>
                    <SearchTextInputs onChange={setSearchQuery} />
                  </DefaultFocus>
                </View>
              }
              headerSize={HEADER_SIZE}
              renderItem={renderItem}
              itemHeight={(theme.sizes.program.portrait.height * 1.1) + 20}
              numberOfColumns={NUMBER_OF_COLUMNS}
              numberOfRenderedRows={NUMBER_OF_RENDERED_ROWS}
              numberOfRowsVisibleOnScreen={NUMBER_OF_ROWS_VISIBLE_ON_SCREEN}
              onEndReachedThresholdRowsNumber={INFINITE_SCROLL_ROW_THRESHOLD}
              rowContainerStyle={styles.rowStyle}
              style={{ backgroundColor: '#111' }}
            />
            {!gridData.length && (
              <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', paddingTop: 200 }}>
                <Text style={{ color: 'white' }}>This Movie is available!</Text>
              </View>
            )}
          </View>
        </DefaultFocus>
      </Page>
import styled from '@emotion/native';
import { SpatialNavigationNode, DefaultFocus } from 'react-tv-space-navigation';
import { TextInput as RNTextInput } from 'react-native';
import { useRef, useEffect } from 'react';
import { Box } from './Box';
import { Spacer } from './Spacer';
import React from 'react';
import { scaledPixels } from '../helpers/scaledPixels';

/**
 * It works, but it's not perfect.
 * If you press the back button on Android to dismiss the keyboard,
 * focus is in a weird state where we keep listening to remote control arrow movements.
 * Ideally, we'd like to always remove the native focus when the keyboard is dismissed.
 */
export const SearchTextInputs = ({ onChange, value }: { onChange: any, value: any }) => {
  const ref = useRef<RNTextInput>(null);
  const handleSelect = () => {
    // Focus on the input after a short delay
    setTimeout(() => {
      ref?.current?.focus();
    }, 500);
  };

  const handleBlur = () => {
    // Blur the input when the focus is lost
    console.log('oin blur------------------------------',ref?.current)
    ref?.current?.blur();
  };

  return (
    <Box>
      {/* <DefaultFocus> */}
        <SpatialNavigationNode
          isFocusable={true}
          onSelect={handleSelect}
          onBlur={handleBlur}
        >
          {({ isFocused }) =>
            <StyledTextInput ref={ref} value={value}
              onChangeText={onChange}
              placeholder='Search'
              keyboardType='email-address'
              isFocused={isFocused}
            />
          }
        </SpatialNavigationNode>
      {/* </DefaultFocus> */}
      <Spacer direction="vertical" gap="$5" />
    </Box>
  );
};

const StyledTextInput = styled(RNTextInput)<{ isFocused: boolean }>(({ isFocused, theme }) => ({
  borderColor: isFocused ? 'white' : 'gray',
  borderWidth: 2,
  borderRadius: 8,
  color: 'white',
  backgroundColor: theme.colors.background.inputBG,
  paddingHorizontal: 8,
  height: scaledPixels(80),   //40,
  width: scaledPixels(550),
  alignSelf:'center',
  textAlignVertical: 'center',
}));

Expected behavior need to move focus from textinput field and after click card's event fires rather than input field event

Additional context working with "react-tv-space-navigation": "^3.4.0",

ionictest2017 commented 1 week ago

@marekkalnik @giolaq @Almouro @guitoof @pierpo please look into it. Please Help