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

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.

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.

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

Thank you

[catamphetamine]

@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({
	value,
	onChange,
	options,
	...rest
}) {
	return (
		<Select
			{...rest}
			label="Phone"
			value={value}
			onChange={onChange}
			options={options}/>
	)
}

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
	})).isRequired
}

The code above doesn’t support dividers though.

[catamphetamine]

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.