CODEWITHSUNDEEP
reactjsformattingformat
Legeo
Legeo

Reputation: 792

React input - cursor jump to the end

I'm using this package react-phone-number-input

Context

I've this phone number field 

<InputPhone
        {...input}
        value={input.value || ''}
        placeholder={intl.formatMessage(
          placeholder ? messages[placeholder] : messages.placeholder,
        )}
        style={{
          borderColor: meta && meta.touched && meta.error && 'red',
        }}
        tabIndex={index}
        size={size}
      />

This is inside a functional component, I cannot use another textInput because we use this little component in multiple forms plus it has special function inside it, like the style and the placeholder.

Problem

The problem is linked to this package react-phone-number-input: the caret jump to the end if i try to edit a number in the firsts two portions.

Someoneknow how can i fix it since the function SmartCaret of react-phone-number-input was disabled ?

Upvotes: 0

Views: 783

Answers (1)

bamse
bamse

Reputation: 4373

Take a look at this issue - sounds like your problem.

You could try out the Smart Caret feature - the last item on the docs page. Keep in mind it might have limitations on some Android devices. 

import SmartInput from 'react-phone-number-input/smart-input'

<PhoneInput
    inputComponent={ SmartInput }
    placeholder="Enter phone number"
    value={ this.state.value }
    onChange={ value => this.setState({ value }) }/>

Hope it helps!

If this doesn't work, a minimal, reproducible example would be helpful, like Dupocas suggested.

Upvotes: 2

Related Questions