likhith/feat:incorporated string normalization to match non english c…

…haracters (binary-com#7649)

* feat: ⚡ incorporated string normalization to match non english character

* fix: ensuring non english character match

* feat: resolved import issue

* feat: incorporated helper function

* feat: added testcases for helper function

* feat: incorporated helper function to all case

* feat: 🎨 refactored code

* feat: code refactor

---------

Co-authored-by: Matin shafiei <matin@deriv.com>
Co-authored-by: Carol Sachdeva <58209918+carol-deriv@users.noreply.github.com>

packages/components/src/components/autocomplete/autocomplete.jsx

@@ -6,6 +6,7 @@ import Icon from '../icon';
 import Input from '../input';
 import DropdownList from '../dropdown-list';
 import { useBlockScroll } from '../../hooks/use-blockscroll';
+import { getEnglishCharacters } from '../../../utils/helper';
 
 const KEY_CODE = {
     ENTER: 13,
@@ -23,9 +24,10 @@ const getFilteredItems = (val, list, should_filter_by_char) => {
             is_string_array ? matchStringByChar(item, val) : matchStringByChar(item.text, val)
         );
     }
-
     return list.filter(item =>
-        is_string_array ? item.toLowerCase().includes(val) : item.text.toLowerCase().includes(val)
+        is_string_array
+            ? getEnglishCharacters(item).toLowerCase().includes(val) || item.toLowerCase().includes(val)
+            : getEnglishCharacters(item.text).toLowerCase().includes(val) || item.text.toLowerCase().includes(val)
     );
 };
 const Autocomplete = React.memo(props => {

packages/components/utils/__tests__/helper.spec.js

@@ -0,0 +1,17 @@
+const { getEnglishCharacters } = require('../helper');
+
+describe('Utility/Helper', () => {
+    it('should return english alphabets removing special characters', () => {
+        const test_input = 'Ai Cập';
+        const test_result = 'Ai Cap';
+
+        expect(getEnglishCharacters(test_input)).toMatch(test_result);
+    });
+
+    it('should return empty string if the text contains no english characters', () => {
+        const test_input = '埃及';
+        const test_result = '';
+
+        expect(getEnglishCharacters(test_input)).toMatch(test_result);
+    });
+});

packages/components/utils/helper.js

@@ -20,8 +20,16 @@ const getPascalCase = str => {
 
 const getFileNameFromPath = path => path.match(/([^/]*)\/*$/)[1].replace('.svg', '');
 
+const getEnglishCharacters = input =>
+    input
+        .normalize('NFD')
+        .split('')
+        .filter(char => /^[a-z ]*$/i.test(char))
+        .join('');
+
 module.exports = {
     getPascalCase,
     getFileNameFromPath,
     getKebabCase,
+    getEnglishCharacters,
 };