toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix the caret position when using the search phrase modifier (#6972)

Browse source
This commit is contained in:
Elias Nahum 2023-01-13 21:06:16 +02:00 committed by GitHub
parent b191154db9
commit 49fc180982
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
app/screens/home/search/initial/modifiers/modifier.tsx
View file

@ -2,7 +2,7 @@
// See LICENSE.txt for license information.
import React, {Dispatch, RefObject, SetStateAction, useCallback} from 'react';
import {StyleSheet} from 'react-native';
import {Platform, StyleSheet} from 'react-native';
import OptionItem from '@components/option_item';
import {SearchRef} from '@components/search';
@ -33,6 +33,12 @@ const Modifier = ({item, searchRef, searchValue, setSearchValue}: Props) => {
addModifierTerm(item.term);
}, [item.term, searchValue]);
const setNativeCursorPositionProp = (position?: number) => {
setTimeout(() => {
searchRef.current?.setNativeProps({selection: {start: position, end: position}});
}, 50);
};
const addModifierTerm = preventDoubleTap((modifierTerm) => {
let newValue = '';
if (!searchValue) {
@ -46,9 +52,16 @@ const Modifier = ({item, searchRef, searchValue, setSearchValue}: Props) => {
setSearchValue(newValue);
if (item.cursorPosition) {
const position = newValue.length + item.cursorPosition;
setTimeout(() => {
searchRef.current?.setNativeProps({selection: {start: position, end: position}});
}, 50);
setNativeCursorPositionProp(position);
if (Platform.OS === 'android') {
// on Android the selection set by setNativeProps is permanent thus the caret returns to the same
// position after we stop typing for a few ms. By setting the position to undefined,
// then the caret remains in place.
setTimeout(() => {
setNativeCursorPositionProp(undefined);
}, 50);
}
}
});