Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

react-responsive-ui select - Cursor jumping to the end in the inputField while editing.

See original GitHub issue
import Phone from 'react-phone-number-input/react-responsive-ui';

This is the import that i am using in my application. I am using the select from the react-responsive-ui. We are facing an issue, the cursor is jumping to the end when editing inside the input field and found this import(react-responsive-ui) is causing this issue. If i change it to use the default select(import Phone from ‘react-phone-number-input’) it all works fine.

Herewith attaching gif file that explains the issue. Phone_cursor_issue

I noticed that in your readme File you are using this select but i could not find a demo or an example of using react-responsive-ui in the latest versions.

Screen Shot 2020-08-14 at 4 36 55 PM

Could you please assist me here to see if I am missing any styles or anything?

Thank you

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:12 (6 by maintainers)

github_iconTop GitHub Comments

catamphetaminecommented, Aug 14, 2020

@Subha Maybe something like:

import React, { useCallback, useMemo } from 'react'
import PropTypes from 'prop-types'
import Select from 'react-responsive-ui/commonjs/Select'

import 'react-responsive-ui/style.css'

export default function CountrySelect({
}) {
	return (

CountrySelect.propTypes = {
	 * A two-letter country code.
	 * Example: "US", "RU", etc.
	value: PropTypes.string,

	 * Updates the `value`.
	onChange: PropTypes.func.isRequired,

	// `<select/>` options.
	options: PropTypes.arrayOf(PropTypes.shape({
		value: PropTypes.string,
		label: PropTypes.string,
		divider: PropTypes.bool

The code above doesn’t support dividers though.

catamphetaminecommented, Aug 14, 2020

The library now doesn’t use specifically react-responsive-ui’s select and instead provides a way for a developer to specify their own select component. See the docs or the demo.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React controlled input cursor jumps - Stack Overflow
If your value is controlled by state, React will maintain the input's cursor position. The problem is when the input receives a change...
Read more >
Solving Caret Jumping in React Inputs - DEV Community ‍ ‍
When you inject programmatically a different value in a DOM input, the input makes no assumption about caret position and moves it to...
Read more >
The Curious Case of Cursor Jumping - Mutually Human
Cursor jumping is simply when the cursor jumps from one location to another, unexpectedly, while the user is typing into a text field....
Read more >
Preserve cursor position when filtering out characters from a ...
If we put the cursor in the middle of the input and try to insert a number, we can see that the cursor...
Read more >
Handling common accessibility problems - MDN Web Docs
(when inside form) Select chosen value. Ctrl + Alt + cursor keys, (when a table is selected) Move between table cells. Screen reader...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found