react-tv-space-navigation
react-tv-space-navigation copied to clipboard
input field focus is not move from input field in TVOS
**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",