Search only with text ignoring emoji in antd Select component

Question

I have select component of antd where option label is not text. Option label has text along with emoji. Now If user want to search for particular text, the select component is not able to search the text which has emojis.

What I want to have is User should search a particular text ignoring the emoji.

import React from 'react';
import 'antd/dist/antd.css';
import './index.css';
import { Select } from 'antd';
const { Option } = Select;

const App = () => (
  <Select
    showSearch
    style={{
      width: 200,
    }}
    placeholder="Search to Select"
    optionFilterProp="children"
    filterOption={(input, option) => option.children.includes(input)}
  >
    <Option value="1"><span>😁</span> Not Identified</Option>
    <Option value="2"><span>🙄</span> Closed</Option>
    <Option value="3"><span>😪</span> Communicated</Option>
    <Option value="4"><span>😚</span> Identified</Option>
    <Option value="5"><span>🥱</span> Resolved</Option>
    <Option value="6"><span>😫</span> Cancelled</Option>
  </Select>
);

export default App;

If need, I have a codesandbox link.

Answer 1

here just use toLowerCase() string function it's work i just updated pls check here codesandbox link

import React from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Select } from "antd";
const { Option } = Select;

const onHandleSearch = (input, option) => {
  let optionChildren = option.children.filter(
    (item) => typeof item === "string"
  );
  return optionChildren[0].toLowerCase().includes(input.toLowerCase());
};

const App = () => (
  <Select
    showSearch
    style={{
      width: 200
    }}
    placeholder="Search to Select"
    optionFilterProp="children"
    filterOption={(input, option) => onHandleSearch(input, option)}
  >
    <Option value="1">
      <span>😁</span> Not Identified
    </Option>
    <Option value="2">
      <span>🙄</span> Closed
    </Option>
    <Option value="3">
      <span>😪</span> Communicated
    </Option>
    <Option value="4">
      <span>😚</span> Identified
    </Option>
    <Option value="5">
      <span>🥱</span> Resolved
    </Option>
    <Option value="6">
      <span>😫</span> Cancelled
    </Option>
  </Select>
);

export default App;