goBack from input fields screen focus got stuck

[rsys2022]

`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 { Typography } from './Typography'; import { Box } from './Box'; import { Spacer } from './Spacer'; import React from 'react';

/**

• 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 TextInputs = ({ label,onChange,value,error,readOnly }: { label: string,onChange:any,onBlur:any,value:any ,error:any,readOnly:any}) => { const ref = useRef<RNTextInput>(null); useEffect(() => { return () => { ref.current?.blur(); // Clear focus when component unmounts }; }, []); return ( <Box> <Typography>{label}</Typography> <Spacer direction="vertical" gap="$5" /> <DefaultFocus> <SpatialNavigationNode isFocusable={true} onSelect={() => { console.log('onSelect--') setTimeout(() => { ref?.current?.focus(); }, 500);

   }}
   onFocus={() => {
     console.log('onFocus--')
   }}
   onBlur={() => {
     console.log('onBlur')
     ref?.current?.blur();
   }}
  

   {({ isFocused }) => <StyledTextInput ref={ref}  value={value}
         onChangeText={onChange}
         keyboardType='email-address'
          isFocused={isFocused} 
          error={error}
          readOnly={readOnly}
          />}
  

); };

const StyledTextInput = styled(RNTextInput)<{ isFocused: boolean,error:any,readOnly:boolean }>(({ isFocused, theme ,error,readOnly}) => ({ borderColor: isFocused ? 'white' : error ? 'red' :'black', borderWidth: 2, borderRadius: 8, color:readOnly? 'gray' : 'white', backgroundColor: theme.colors.background.inputBG, paddingHorizontal:8, height:55 })); `

screen freeze after goback from a screen which have input firld Please help

[rsys2022]

when we focus on the input field and type anything then go back from the screen then crash the app faces this issue only on Android TV

Please Help me

I am unable to resolve this issue

without focus on input field every thing is working fine, I am using your component for input Field

[pierpo]

Hello!

I am sorry, but it is very hard to understand your problem 😂

• The code you provided is incomplete
• A screenshot would be nice

Can you provide more info?

[rsys2022]

whenever i have click on input field and type anything then click back button then got freeze or crashed

[pierpo]

Hey, the screenshots of the code are not helpful. Can you provide screenshots and videos of your app?

Besides, you are mixing native components (not supported by the lib) with custom components. Checkout TextInput.tsx in the example of the lib.

[Mahesh-Dev94]

 <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',
}));

focus still present on input field while it is showing traversing on cards but after click always open keyboard in TVOS only