Skip to content

Cursor Issue on IOS Devices #5

@KeonPaul

Description

@KeonPaul

React Native Environment Info:
System:
OS: macOS 10.14.1
CPU: x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
Memory: 1.07 GB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.10.0 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
IDEs:
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: 0.57.1 => 0.57.1
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

Description:

I am currently using Formik with react-text-mask-hoc to do a phone number masked input. It works perfectly fine on Android however on IOS the cursor goes the wrong character after passing the masked characters.
As shown in the GIF after entering 868 the cursor jumps back to the second position.
ezgif com-video-to-gif

This is my set-up

import { TextMask, TextInputAdapter } from 'react-text-mask-hoc/ReactNative';

 <TextMask
          Component={TextInputAdapter}
          guide={false}
          mask={[/[1-9]/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
          maxLength={12}
          keyboardType={keyboardType}
          value={value}
          onChange={this.handleChange}
          onBlur={this.handleTouch}
          error={error}
          showMask
          style={styles.FieldInput}
        />

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions