The issue with maintaining the cursor position.

[pedrogarciyalopez]

Hello! Thank you for the great library!

I have encountered a problem that I can’t figure out how to solve. To reproduce the issue, simply open your demo, place the cursor between two characters in any input, and add another character. The cursor will end up at the end of the string.

In other words, the cursor position is not maintained, which becomes particularly problematic when there is a textarea with a large amount of text in the application. If a user wants to insert several words into the middle of the existing text, with each new character, the cursor will jump to the end of the text.

2025-03-29.00.13.35.mp4

[Morglod]

Hi! Thank you!

Basically in real world app instead of <input/> you will have own component. So as a solution - use own component and then everything will be ok. This happens because of how react thinks how to update element. Otherwise there will be more problems with invalid props as with use-context-selector

[pedrogarciyalopez]

@Morglod

Hi! Thanks for your reply!

"use own component" - What do you mean? Could you clarify or provide a code example?

I've done some research and found a pretty detailed article about cursor position loss in React.

It looks like point 2 is your case.

2. Setting the value after JavaScript (together with React) closed the timeframe for the edit to be made or setting nothing at all

.

A possible solution is to wrap setRerender in flushSync. But it seems that using flushSync is not a very good idea.

const handler = () => {
    if (!isDataEqual(ref.current.data, partialData.current.ctx)) {
        partialData.current.ctx = ref.current.data;
        const nextGetterValue = getter(ref.current.data, partialData.current.getterValue);
        if (!isEqual(nextGetterValue, partialData.current.getterValue)) {
            partialData.current.getterValue = nextGetterValue;
            flushSync(() => {
              setRerender(x => x + 1);
            })
        }
    }
};

We have a universal app using react-native-web. We often use multiline fields. If you just type text, everything works fine. But if you want to edit something in the middle, it's a pain. On the Web(browser), the cursor always jumps to the end of the line, while in Native(mobile app), it behaves completely unpredictably. For now, we've decided to use a pure React context.

Please let me know if you have any ideas.

[Morglod]

Finally understood problem. Working on solution

[Morglod]

@pedrogarciyalopez looks like fixed it. Please test if everything works good

npm i use-partial-context@1.4.1

Feel free to contact me by same username as here in telegram if you need more support

[pedrogarciyalopez]

@Morglod Hi! Thanks!

Using useLayoutEffect helped fix the issue in the browser. However, unfortunately, it doesn’t work in React Native. In React Native, UI re-rendering is asynchronous and happens through the bridge. JS (React) places an event in the queue, and the native part (iOS/Android) takes this event from the queue and executes it when possible. The reverse exchange happens the same way. The HTML specification doesn’t apply here, and the cursor behaves differently.

I recorded a video, this is a mobile application on Android. When I try to add text in the middle of a line, the cursor stays in the same position instead of moving forward.

android-app.mp4

[Morglod]

Hm.
Probably better control caret manually or use some state proxy or uncontrolled input (defaultValue instead of value), because otherwise you could easily get same problem just with props or other context. It looks very strange how react-native updates element in this case.
If you could somehow send sample that I could run on my side to investigate this problem, will be cool.

As a solution it could be something like this, so state from props will be updated only if external value is changed (from props.value or from context), which will never happen because context value is propagated immediately so for input it looks always synced

function useStateProxy(propsValue, defaultValue) {
    const [state,setState] = useState(defaultValue);
    useEffect(() => {
        setState(propsValue);
    },[propsValue]);
    return [state,setState];
}

[pedrogarciyalopez]

@Morglod
Here's basic example to illustrate the problem.
Try running the react-native mobile app - I tested it on Android. I haven't tried iOS yet, but most likely it'll be the same there. This code works as expected when running in the web browser (react-native-web). Check out the video below.

UPD: Try with pure react context, everything works well on all platforms.

import React, { Dispatch, SetStateAction, useState } from 'react';
import { StyleSheet, TextInput, View, Text } from 'react-native';
import { createPartialContext } from 'use-partial-context';

type AppContextType = {
  inputValue: string;
  setInputValue: Dispatch<SetStateAction<string>>
}

const AppContext = createPartialContext<AppContextType>();

function AppContextProvider({ children }: { children: React.ReactNode }) {
  const [ inputValue, setInputValue ] = useState('');
	
  return (
    <AppContext.Provider value={{ inputValue, setInputValue }}>
      {children}
    </AppContext.Provider>
  )
}

function SomeForm() {
  const {
    inputValue,
    setInputValue
  } = AppContext.usePartialContext((contextValue) => contextValue);
	
  const [ localInputValue, setLocalInputValue ] = useState('')
	
  return (
    <View style={styles.pageContainer}>
      <Text>Input controlled by context state</Text>
      <TextInput
        style={styles.input}
        value={inputValue}
        onChangeText={setInputValue}
      />
      <Text>Input controlled by local state</Text>
      <TextInput
        style={styles.input}
        value={localInputValue}
        onChangeText={setLocalInputValue}
      />
    </View>
  );
}

export function App() {
  return (
    <AppContextProvider>
      <SomeForm />
    </AppContextProvider>
  )
}

const styles = StyleSheet.create({
  pageContainer: {
    padding: 30,
  },
  input: {
    height: 50,
    paddingHorizontal: 15,
    borderRadius: 10,
    backgroundColor: '#DDD',
    marginBottom: 25
  }
})

Android App	Web browser