Comments (4)
If I'm understanding this correctly, the bug occurs when you use your event handlers to clear the input/text and re-focus onto the input/textarea, and the application is not registering the text input coming from the IME.
Could you try adding inputRef.current.blur() and textAreaRef.current.blur(), prior to setting the Input and areaText to empty string? So the order will be: blur --> clear input --> focus.
If the behavior seems random, then we can try wrapping the clear input and focus within a promise so we can ensure it executes after the blur event.
from react.
@Ykk2 Thank you, I tried both ways you suggested, and here is what happened:
- in case that I add textAreaRef.current.blur(), i still got the same bug as before
textAreaRef.current.blur();
setAreaText('');
textAreaRef.current.focus();
- Incase that i use Promise to make sure they are executed in order ( blur --> clear input --> focus. ), in IOS: the virtual keyboard is hidden when the button is pressed, while in Android, virtual keyboard is hidden but it shows up immediately, and textarea is focus
With the code that I provided from the beginning, this is what happens on android: https://screenpal.com/watch/c0hIjGVAIJw , and I think this is how it should be on IOS, without adding any code. But as i said, it might cause by IOS IME, so if you have another solution to fix this, plz reply, thanks a lot
from react.
Can you try adding the below two handlers and check.
const handleCompositionStart = () => {
// When composition starts, clear the areaText state
setAreaText('');
};
const handleCompositionEnd = (e) => {
// When composition ends, update the areaText state with the composed text
setAreaText(e.target.value);
};
from react.
@bsuryab sorry for the late response and thanks for your help, i tried your suggested way but it didn't work
from react.
Related Issues (20)
- Feature Request: Reset form inside of Server Component or Action
- Bug: submitting form clears fields unnecessarily despite using preventDefault HOT 3
- Bug: the <textarea> component's ValidityState.tooShort is incorrect when component is controlled and the value is passed in via the value prop HOT 2
- Why react-dom/server will automatic reorder elements in head
- useRef: Counting renders doesn´t work as expected in React neither 18.0.1 nor 18.0.2 HOT 2
- Bug:
- The React Framework has been one of the best in terms of creating responsive and exciting web design. Its development environment has been helpful in terms of dependencies and how quickly they are accessible by downloading in the terminal using 'npm.' I'm glad I could use the great framework this year. Cheers to a great year, and here comes 2024! HOT 2
- KBug:
- [DevTools Bug]: Hook parsing fails if a hook uses useSyncExternalStore HOT 9
- Bug: After some time useSyncExternalStore stops reacting on store updates HOT 1
- Bug: Memory Leak in React 17 when using useRef Hook HOT 1
- Why doesn't react absorb some of the awesome designs from the community, is it because they don't want to or won't?
- Replace "Donate to Ukraine" Banner with "Support Palestine" in ReactJS HOT 18
- Bug: Suspense Exception in react-server-dom-webpack HOT 2
- Bug: Can't submit form programatically when using server actions HOT 7
- [DevTools Bug] Cannot add node "20" because a node with that id is already in the Store. HOT 1
- [DevTools Bug] Cannot read properties of undefined (reading 'concat') HOT 4
- Bug: Random preloads added for images
- Bug: Weird behavior of form when i set a state value within an onChange handler. HOT 3
- Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react.