epam / epam/UUI

[PickerInput, TextArea]: incorrect count of characters when using emoji

Open
#3,013 0 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
247
Forks
78
Avg merge
14h 27m
Merged PRs (30d)
15

Description

## Description

Since emoji encode multiple characters, `string.length` won't match the amount of visible symbols, which leads to hitting count limits or triggering data loading prematurely. **I only mentioned two components, but it is necessary to check others too if they have character-counting functionality**.

## Steps to Reproduce

1. Open ["With length limit" example](https://uui.epam.com/documents?id=textArea&mode=doc&category=components#textArea-MaxLengthCounter) for `TextArea` component in the documentation
2. Type in any emoji (for example, 😊)
3. Check the count of characters under the component

For `PickerInput`, check that data loading is triggered when `minCharsToSearch` is set to 2+.

## Actual result

😊 counts as 2 characters/symbols.

## Expected result

😊 counts as 1 character/symbol.

## Additional information

There are two popular ways to fix this:
* Destructuring into an array using spread syntax:
```ts
console.log([..."😊"].length); // 1
```
* Using [`Intl.Segmenter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter):
```ts
const segmenter = new Intl.Segmenter();
const segmentedString = segmenter.segment("😊");
const segments = Array.from(segmentedString);
console.log(segments.length); // 1
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.