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

[vasilii-kovalev]

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 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:

  console.log([..."😊"].length); // 1

• Using Intl.Segmenter:

  const segmenter = new Intl.Segmenter();
  const segmentedString = segmenter.segment("😊");
  const segments = Array.from(segmentedString);
  console.log(segments.length); // 1