react-tv-space-navigation icon indicating copy to clipboard operation
react-tv-space-navigation copied to clipboard

input field focus is not move from input field in TVOS

Open ionictest2017 opened this issue 7 months ago • 1 comments

**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 avatar Jul 04 '24 12:07 ionictest2017