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

Subha commented 3 years ago

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

catamphetamine commented 3 years ago

Hello. This seems to be an old version because react-phone-number-input no longer comes with /react-responsive-ui export. Caret jumping at the end used to be the default behavior: smartCaret={false}. If smartCaret={true} property doesn't fix the issue then that would mean that there will be no fix for this one.

Subha commented 3 years ago

Hello. This seems to be an old version because react-phone-number-input no longer comes with /react-responsive-ui export. Caret jumping at the end used to be the default behavior: smartCaret={false}. If smartCaret={true} property doesn't fix the issue then that would mean that there will be no fix for this one.

What a quick response! Thank you

I did update my application to use the new version( "react-phone-number-input": "3.0.25"), i am surprised that i did not get any error that this is not supported and the select works fine but with this cursor issue. I tried with smartCaret set to both false and true does not seem to help.

catamphetamine commented 3 years ago

@Subha There is no such export. See: https://unpkg.com/browse/react-phone-number-input@3.0.25/

Subha commented 3 years ago

@Subha There is no such export. See: https://unpkg.com/browse/react-phone-number-input@3.0.25/

l see my package lock pointing to two versions. "react-phone-number-input": { "version": "3.0.25" } "react-phone-number-input": { "version": "2.3.24" "requires": { "classnames": "^2.2.5", "input-format": "^0.2.2", "libphonenumber-js": "^1.7.25", "prop-types": "^15.7.2", "react-lifecycles-compat": "^3.0.4", "react-responsive-ui": "^0.14.177"}

Thank you for clarifying.

So we need to find another way to have a custom select?

catamphetamine commented 3 years ago

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.

Subha commented 3 years ago

Thanks for the quick response, i will take a look at the custom select.

catamphetamine commented 3 years ago

@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.

Subha commented 3 years ago

This is not an issue but it is a question and I am sure you can help me. I am trying to get the customSelect to work like how it was working in the older version.

and the UI looks like the below: => the div with class = 'react-phone-number-inputicon' that holds the flag image is the child of span class -> 'rruiselect__selected-content'

With the latest version, I am passing the custom select(react-responsive-ui) with the flag like what you have in your examples :

             <Phone
              {...customProps}
              placeholder={placeholder ? placeholder : ''}
              defaultCountry={countryVal}
              smartCaret={true}
              ***countrySelectComponent={CountrySelectWithIcon}***

I am confused about this DOM arrangements that does not match the previous versions, the flag image icon is not in the right place: Screen Shot 2020-08-17 at 11 12 17 PM which ended up like the below: I need the image(flag icon) to be part of this content span: <span class="rrui__select__selected-content"> Any suggestions please? The last option for me is to try with normal html select tag and add the necessary styles to match it. Before i try that option wanted to check if i am missing something.

Here is my Select render

 <Select
      {...rest}
      value={value}
      label={''}
      icon={true}
      onChange={onChange} options={options}>
      {options.map(({ value }) => (
        <option
          key={value || 'ZZ'}
          value={value || 'ZZ'}
        >
        </option>
      ))}
    </Select>

Many thanks again.

catamphetamine commented 3 years ago

You can provide an online demo somewhere on a website like codesandbox.io if you want someone to look at any issues. Otherwise, you can still use the native

catamphetamine / react-phone-number-input

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