Skip to content

TextInput maxlength cuts Unicode caracters (Emojis) #10964

Closed
@jpolack

Description

@jpolack

Hello everyone,

yesterday i noticed that a TextInput has a problem displaying Emojis at the end of the fields maxlength.
If i insert the "white happy man with black hair raising one hand" Emoji (iOS) at the position maxlength-1 it shows a square with an "A" in it instead.
If i insert the "white happy man with black hair raising one hand" Emoji (iOS) at the position maxlength-2 it shows a square with an "yellow happy woman with blonde hair raising one hand" in it instead.
If i insert the "white happy man with black hair raising one hand" Emoji (iOS) at the position maxlength-3 it shows a square with an "white happy woman with black hair raising one hand" in it instead.
If i insert the "white happy man with black hair raising one hand" Emoji (iOS) at the position maxlength-4 it shows a square with an "yellow happy woman with blonde hair raising one hand" and the square with an "A" in it instead.

Seems like the maxlength cuts the unicode sign at the end and causes to show different Emojis than inserted

  • React Native version: 0.36
  • Platform: iOS - tested on iOS 10.1.1

Activity

ericvicenti

ericvicenti commented on Nov 16, 2016

@ericvicenti
Contributor

Might be related to this?

#10929

hramos

hramos commented on May 25, 2017

@hramos
Contributor

Closing this issue because it has been inactive for a while. If you think it should still be opened let us know why.

euharrison

euharrison commented on Jan 17, 2018

@euharrison

This also happen with me.

We have maxLength={4} and this is what happen in different cases:

  • type: mmmm then works perfect
  • type mm😀 then it reach the limits (emojis count 2 characters)
  • type 😀😀 then it reach the limits (emojis count 2 characters)
  • type m😀😀 then it breaks the limits with "5" characteres and bug cleaning all text

ezgif-5-209c8d19ac

KavithaSaras

KavithaSaras commented on Mar 21, 2018

@KavithaSaras

@euharrison can you please share this plugin link?

euharrison

euharrison commented on Mar 21, 2018

@euharrison

@KavithaSaras sorry, which plugin?

My solution was to set a dynamic maxLength that resolve this:

import React from 'react';
import { TextInput } from 'react-native';

const MAX_LENGTH = 95;

class MessageInput extends React.Component {
  constructor(props) {
    super(props);

    this.valueLength = 0;
    this.amountOfEmoji = 0;

    this.state = {
      value: '',
      maxLength: MAX_LENGTH,
    }
  }
  
  onChangeText = (text) => {
    // if text.length increased by 2, then the user has typed an emoji
    if ((text.length - this.valueLength) === 2) {
      this.amountOfEmoji += 1;
    }

    // maxLength will be increased to support emoji as only one character count
    let maxLength = MAX_LENGTH + this.amountOfEmoji;

    // if missing only one character to be typed, reduce maxLength to avoid emoji breaks the TextInput
    if (text.length >= (MAX_LENGTH + this.amountOfEmoji) - 1) {
      maxLength = text.length;
    }

    this.setState({ value: text, maxLength });
    this.valueLength = text.length;
  }

  render() {
    return (
      <TextInput
        editable
        value={this.state.value}
        maxLength={this.state.maxLength}
        onChangeText={this.onChangeText}
      />
    )
  }
}
locked as resolved and limited conversation to collaborators on Jul 19, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @hramos@euharrison@ericvicenti@jpolack@react-native-bot

      Issue actions

        TextInput maxlength cuts Unicode caracters (Emojis) · Issue #10964 · facebook/react-native