Skip to content

Commit

Permalink
fix: compose box is shown after tapping header and returning back
Browse files Browse the repository at this point in the history
  • Loading branch information
tienifr committed Jan 12, 2024
1 parent e2d1443 commit 4a44ef2
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 1 deletion.
8 changes: 8 additions & 0 deletions src/components/Composer/index.android.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import React, {useCallback, useEffect, useMemo, useRef} from 'react';
import type {TextInput} from 'react-native';
import {StyleSheet} from 'react-native';
import RNTextInput from '@components/RNTextInput';
import useResetComposerFocus from '@hooks/useResetComposerFocus';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import * as ComposerUtils from '@libs/ComposerUtils';
Expand All @@ -28,6 +29,7 @@ function Composer(
ref: ForwardedRef<TextInput>,
) {
const textInput = useRef<TextInput | null>(null);
const {isFocused, shouldResetFocus} = useResetComposerFocus(textInput);

const styles = useThemeStyles();
const theme = useTheme();
Expand Down Expand Up @@ -89,6 +91,12 @@ function Composer(
/* eslint-disable-next-line react/jsx-props-no-spreading */
{...props}
readOnly={isDisabled}
onBlur={(e) => {
if (!isFocused) {
shouldResetFocus.current = true; // detect the input is blurred when the page is hidden
}
props?.onBlur?.(e);
}}
/>
);
}
Expand Down
9 changes: 8 additions & 1 deletion src/components/Composer/index.ios.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import React, {useCallback, useEffect, useMemo, useRef} from 'react';
import type {TextInput} from 'react-native';
import {StyleSheet} from 'react-native';
import RNTextInput from '@components/RNTextInput';
import useResetComposerFocus from '@hooks/useResetComposerFocus';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import * as ComposerUtils from '@libs/ComposerUtils';
Expand All @@ -28,7 +29,7 @@ function Composer(
ref: ForwardedRef<TextInput>,
) {
const textInput = useRef<TextInput | null>(null);

const {isFocused, shouldResetFocus} = useResetComposerFocus(textInput);
const styles = useThemeStyles();
const theme = useTheme();

Expand Down Expand Up @@ -84,6 +85,12 @@ function Composer(
/* eslint-disable-next-line react/jsx-props-no-spreading */
{...props}
readOnly={isDisabled}
onBlur={(e) => {
if (!isFocused) {
shouldResetFocus.current = true; // detect the input is blurred when the page is hidden
}
props?.onBlur?.(e);
}}
/>
);
}
Expand Down
19 changes: 19 additions & 0 deletions src/hooks/useResetComposerFocus.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import {useIsFocused} from '@react-navigation/native';
import type {MutableRefObject} from 'react';
import {useEffect, useRef} from 'react';
import type {TextInput} from 'react-native';

export default function useResetComposerFocus(inputRef: MutableRefObject<TextInput | null>) {
const isFocused = useIsFocused();
const shouldResetFocus = useRef(false);

useEffect(() => {
if (!isFocused || !shouldResetFocus.current) {
return;
}
inputRef.current?.focus(); // focus input again
shouldResetFocus.current = false;
}, [isFocused, inputRef]);

return {isFocused, shouldResetFocus};
}

0 comments on commit 4a44ef2

Please sign in to comment.