From 200d3e7ec1c535736da02e3ea5a538d056c5591c Mon Sep 17 00:00:00 2001
From: Talyor Chen <prosdev0107@outlook.com>
Date: Thu, 24 Feb 2022 07:54:22 -0500
Subject: [PATCH 1/8] make that the comma can be added by removing it from
 token separators in select component.

---
 superset-frontend/src/components/Select/Select.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset-frontend/src/components/Select/Select.tsx b/superset-frontend/src/components/Select/Select.tsx
index a36a0d569aeb7..61c96ef89bada 100644
--- a/superset-frontend/src/components/Select/Select.tsx
+++ b/superset-frontend/src/components/Select/Select.tsx
@@ -219,7 +219,7 @@ const StyledLoadingText = styled.div`
 `;
 
 const MAX_TAG_COUNT = 4;
-const TOKEN_SEPARATORS = [',', '\n', '\t', ';'];
+const TOKEN_SEPARATORS = ['\n', '\t', ';'];
 const DEBOUNCE_TIMEOUT = 500;
 const DEFAULT_PAGE_SIZE = 100;
 const EMPTY_OPTIONS: OptionsType = [];

From b6cff3cba2a0a9e0a78f86374de1794eb8a55e81 Mon Sep 17 00:00:00 2001
From: Talyor Chen <prosdev0107@outlook.com>
Date: Mon, 28 Feb 2022 10:36:16 -0500
Subject: [PATCH 2/8] fix(explore comma): add the allowTokenSeperators props
 into Select

---
 .../src/shared-controls/index.tsx                    |  1 +
 superset-frontend/src/components/Select/Select.tsx   | 12 ++++++++++--
 .../explore/components/controls/SelectControl.jsx    |  4 ++++
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx
index 1c9ea8d8d4a19..39122de41fbd0 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx
@@ -432,6 +432,7 @@ const y_axis_format: SharedControlConfig<'SelectControl'> = {
   default: DEFAULT_NUMBER_FORMAT,
   choices: D3_FORMAT_OPTIONS,
   description: D3_FORMAT_DOCS,
+  allowTokenSeperators: false,
   mapStateToProps: state => {
     const showWarning = state.controls?.comparison_type?.value === 'percentage';
     return {
diff --git a/superset-frontend/src/components/Select/Select.tsx b/superset-frontend/src/components/Select/Select.tsx
index 61c96ef89bada..feb5ee54f69df 100644
--- a/superset-frontend/src/components/Select/Select.tsx
+++ b/superset-frontend/src/components/Select/Select.tsx
@@ -89,6 +89,13 @@ export interface SelectProps extends PickedSelectProps {
    * False by default.
    * */
   allowNewOptions?: boolean;
+  /**
+   * It enables the user to use the seperators.
+   * Can be used token seperators by defined secific characters if TRUE.
+   * Can't be use token seperators if FALSE.
+   * True by default.
+   * */
+  allowTokenSeperators?: boolean;
   /**
    * It adds the aria-label tag for accessibility standards.
    * Must be plain English and localized.
@@ -219,7 +226,7 @@ const StyledLoadingText = styled.div`
 `;
 
 const MAX_TAG_COUNT = 4;
-const TOKEN_SEPARATORS = ['\n', '\t', ';'];
+const TOKEN_SEPARATORS = [',', '\n', '\t', ';'];
 const DEBOUNCE_TIMEOUT = 500;
 const DEFAULT_PAGE_SIZE = 100;
 const EMPTY_OPTIONS: OptionsType = [];
@@ -268,6 +275,7 @@ export const propertyComparator =
  */
 const Select = ({
   allowNewOptions = false,
+  allowTokenSeperators = true,
   ariaLabel,
   fetchOnlyOnSearch,
   filterOption = true,
@@ -732,7 +740,7 @@ const Select = ({
         placeholder={placeholder}
         showSearch={shouldShowSearch}
         showArrow
-        tokenSeparators={TOKEN_SEPARATORS}
+        tokenSeparators={allowTokenSeperators ? TOKEN_SEPARATORS : []}
         value={selectValue}
         suffixIcon={<SuffixIcon />}
         menuItemSelectedIcon={
diff --git a/superset-frontend/src/explore/components/controls/SelectControl.jsx b/superset-frontend/src/explore/components/controls/SelectControl.jsx
index 7642603866949..abc3b7bd97868 100644
--- a/superset-frontend/src/explore/components/controls/SelectControl.jsx
+++ b/superset-frontend/src/explore/components/controls/SelectControl.jsx
@@ -23,6 +23,7 @@ import Select, { propertyComparator } from 'src/components/Select/Select';
 import ControlHeader from 'src/explore/components/ControlHeader';
 
 const propTypes = {
+  allowTokenSeperators: PropTypes.bool,
   ariaLabel: PropTypes.string,
   autoFocus: PropTypes.bool,
   choices: PropTypes.array,
@@ -67,6 +68,7 @@ const propTypes = {
 };
 
 const defaultProps = {
+  allowTokenSeperators: true,
   autoFocus: false,
   choices: [],
   clearable: true,
@@ -162,6 +164,7 @@ export default class SelectControl extends React.PureComponent {
 
   render() {
     const {
+      allowTokenSeperators,
       ariaLabel,
       autoFocus,
       clearable,
@@ -222,6 +225,7 @@ export default class SelectControl extends React.PureComponent {
     };
 
     const selectProps = {
+      allowTokenSeperators,
       allowNewOptions: freeForm,
       autoFocus,
       ariaLabel:

From bf17615dd53b726c2883bfb03a454d79224969cf Mon Sep 17 00:00:00 2001
From: Talyor Chen <prosdev0107@outlook.com>
Date: Mon, 7 Mar 2022 09:05:39 -0500
Subject: [PATCH 3/8] fix(explore comma): make to allow to customize the token
 separators in Select.

---
 .../src/shared-controls/index.tsx                |  2 +-
 .../src/components/Select/Select.tsx             | 16 +++++++---------
 .../components/controls/SelectControl.jsx        |  7 +++----
 3 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx
index 39122de41fbd0..fce3c7deb5866 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx
@@ -432,7 +432,7 @@ const y_axis_format: SharedControlConfig<'SelectControl'> = {
   default: DEFAULT_NUMBER_FORMAT,
   choices: D3_FORMAT_OPTIONS,
   description: D3_FORMAT_DOCS,
-  allowTokenSeperators: false,
+  tokenSeperators: ['\n', '\t', ';'],
   mapStateToProps: state => {
     const showWarning = state.controls?.comparison_type?.value === 'percentage';
     return {
diff --git a/superset-frontend/src/components/Select/Select.tsx b/superset-frontend/src/components/Select/Select.tsx
index feb5ee54f69df..23e4f5b30ba71 100644
--- a/superset-frontend/src/components/Select/Select.tsx
+++ b/superset-frontend/src/components/Select/Select.tsx
@@ -89,13 +89,6 @@ export interface SelectProps extends PickedSelectProps {
    * False by default.
    * */
   allowNewOptions?: boolean;
-  /**
-   * It enables the user to use the seperators.
-   * Can be used token seperators by defined secific characters if TRUE.
-   * Can't be use token seperators if FALSE.
-   * True by default.
-   * */
-  allowTokenSeperators?: boolean;
   /**
    * It adds the aria-label tag for accessibility standards.
    * Must be plain English and localized.
@@ -158,6 +151,11 @@ export interface SelectProps extends PickedSelectProps {
    * Undefined by default.
    */
   fetchOnlyOnSearch?: boolean;
+  /**
+   * It defines a customized token separators.
+   * If it is not defined, will use the default value.
+   */
+  tokenSeperators?: string[];
   /**
    * It provides a callback function when an error
    * is generated after a request is fired.
@@ -275,7 +273,6 @@ export const propertyComparator =
  */
 const Select = ({
   allowNewOptions = false,
-  allowTokenSeperators = true,
   ariaLabel,
   fetchOnlyOnSearch,
   filterOption = true,
@@ -297,6 +294,7 @@ const Select = ({
   showSearch = true,
   sortComparator = defaultSortComparator,
   value,
+  tokenSeperators,
   ...props
 }: SelectProps) => {
   const isAsync = typeof options === 'function';
@@ -740,7 +738,7 @@ const Select = ({
         placeholder={placeholder}
         showSearch={shouldShowSearch}
         showArrow
-        tokenSeparators={allowTokenSeperators ? TOKEN_SEPARATORS : []}
+        tokenSeparators={tokenSeperators || TOKEN_SEPARATORS}
         value={selectValue}
         suffixIcon={<SuffixIcon />}
         menuItemSelectedIcon={
diff --git a/superset-frontend/src/explore/components/controls/SelectControl.jsx b/superset-frontend/src/explore/components/controls/SelectControl.jsx
index abc3b7bd97868..25ea9a4075df9 100644
--- a/superset-frontend/src/explore/components/controls/SelectControl.jsx
+++ b/superset-frontend/src/explore/components/controls/SelectControl.jsx
@@ -23,7 +23,6 @@ import Select, { propertyComparator } from 'src/components/Select/Select';
 import ControlHeader from 'src/explore/components/ControlHeader';
 
 const propTypes = {
-  allowTokenSeperators: PropTypes.bool,
   ariaLabel: PropTypes.string,
   autoFocus: PropTypes.bool,
   choices: PropTypes.array,
@@ -53,6 +52,7 @@ const propTypes = {
   options: PropTypes.array,
   placeholder: PropTypes.string,
   filterOption: PropTypes.func,
+  tokenSeperators: PropTypes.arrayOf(PropTypes.string),
 
   // ControlHeader props
   label: PropTypes.string,
@@ -68,7 +68,6 @@ const propTypes = {
 };
 
 const defaultProps = {
-  allowTokenSeperators: true,
   autoFocus: false,
   choices: [],
   clearable: true,
@@ -164,7 +163,6 @@ export default class SelectControl extends React.PureComponent {
 
   render() {
     const {
-      allowTokenSeperators,
       ariaLabel,
       autoFocus,
       clearable,
@@ -181,6 +179,7 @@ export default class SelectControl extends React.PureComponent {
       optionRenderer,
       showHeader,
       value,
+      tokenSeperators,
       // ControlHeader props
       description,
       renderTrigger,
@@ -225,7 +224,6 @@ export default class SelectControl extends React.PureComponent {
     };
 
     const selectProps = {
-      allowTokenSeperators,
       allowNewOptions: freeForm,
       autoFocus,
       ariaLabel:
@@ -247,6 +245,7 @@ export default class SelectControl extends React.PureComponent {
       placeholder,
       sortComparator: this.props.sortComparator || propertyComparator('order'),
       value: getValue(),
+      tokenSeperators,
     };
 
     return (

From 0fe8839a4870b455e67e28a9f309ac64454c37a0 Mon Sep 17 00:00:00 2001
From: Talyor Chen <prosdev0107@outlook.com>
Date: Mon, 7 Mar 2022 10:41:11 -0500
Subject: [PATCH 4/8] fix(explore comma): make to add the unit test and story
 book.

---
 superset-frontend/src/components/Select/Select.stories.tsx  | 1 +
 .../src/explore/components/controls/SelectControl.test.jsx  | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/superset-frontend/src/components/Select/Select.stories.tsx b/superset-frontend/src/components/Select/Select.stories.tsx
index d64eb78a4c3ad..a5c1941546ea8 100644
--- a/superset-frontend/src/components/Select/Select.stories.tsx
+++ b/superset-frontend/src/components/Select/Select.stories.tsx
@@ -460,6 +460,7 @@ AsyncSelect.args = {
   pageSize: 10,
   withError: false,
   withInitialValue: false,
+  tokenSeperators: ['\n', '\t', ';'],
 };
 
 AsyncSelect.argTypes = {
diff --git a/superset-frontend/src/explore/components/controls/SelectControl.test.jsx b/superset-frontend/src/explore/components/controls/SelectControl.test.jsx
index c2a69a2631eb1..7c943294d05e1 100644
--- a/superset-frontend/src/explore/components/controls/SelectControl.test.jsx
+++ b/superset-frontend/src/explore/components/controls/SelectControl.test.jsx
@@ -78,6 +78,12 @@ describe('SelectControl', () => {
       expect(wrapper.find(SelectComponent).prop('allowNewOptions')).toBe(false);
     });
 
+    it('renders with tokenSeperators', () => {
+      wrapper.setProps({ tokenSeperators: ['\n', '\t', ';'] });
+      expect(wrapper.find(SelectComponent)).toExist();
+      expect(wrapper.find(SelectComponent).prop('tokenSeperators')).toEqual(expect.arrayContaining([expect.any(String)]));
+    });
+
     describe('empty placeholder', () => {
       describe('withMulti', () => {
         it('does not show a placeholder if there are no choices', () => {

From 7fe95aac7a32181ee3c2303fe63bcbcc5606100a Mon Sep 17 00:00:00 2001
From: Talyor Chen <prosdev0107@outlook.com>
Date: Mon, 7 Mar 2022 10:53:20 -0500
Subject: [PATCH 5/8] fix(explore comma): make to fix the lint

---
 .../src/explore/components/controls/SelectControl.test.jsx    | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/src/explore/components/controls/SelectControl.test.jsx b/superset-frontend/src/explore/components/controls/SelectControl.test.jsx
index 7c943294d05e1..0421ccf9f9f6a 100644
--- a/superset-frontend/src/explore/components/controls/SelectControl.test.jsx
+++ b/superset-frontend/src/explore/components/controls/SelectControl.test.jsx
@@ -81,7 +81,9 @@ describe('SelectControl', () => {
     it('renders with tokenSeperators', () => {
       wrapper.setProps({ tokenSeperators: ['\n', '\t', ';'] });
       expect(wrapper.find(SelectComponent)).toExist();
-      expect(wrapper.find(SelectComponent).prop('tokenSeperators')).toEqual(expect.arrayContaining([expect.any(String)]));
+      expect(wrapper.find(SelectComponent).prop('tokenSeperators')).toEqual(
+        expect.arrayContaining([expect.any(String)]),
+      );
     });
 
     describe('empty placeholder', () => {

From 11bc538d87e697ad10a3b4542f766752a21bc8dd Mon Sep 17 00:00:00 2001
From: Talyor Chen <prosdev0107@outlook.com>
Date: Tue, 8 Mar 2022 03:37:32 -0500
Subject: [PATCH 6/8] fix(explore comma): make to fix the spell  & add
 tokenSeparatprs props to PickedSelectProps

---
 .../src/shared-controls/index.tsx                      |  2 +-
 .../src/components/Select/Select.stories.tsx           |  2 +-
 superset-frontend/src/components/Select/Select.tsx     | 10 +++-------
 .../src/explore/components/controls/SelectControl.jsx  |  6 +++---
 .../explore/components/controls/SelectControl.test.jsx |  6 +++---
 5 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx
index cc89c352c8b2d..1b70c7e0e9294 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx
@@ -431,7 +431,7 @@ const y_axis_format: SharedControlConfig<'SelectControl'> = {
   default: DEFAULT_NUMBER_FORMAT,
   choices: D3_FORMAT_OPTIONS,
   description: D3_FORMAT_DOCS,
-  tokenSeperators: ['\n', '\t', ';'],
+  tokenSeparators: ['\n', '\t', ';'],
   mapStateToProps: state => {
     const showWarning = state.controls?.comparison_type?.value === 'percentage';
     return {
diff --git a/superset-frontend/src/components/Select/Select.stories.tsx b/superset-frontend/src/components/Select/Select.stories.tsx
index a5c1941546ea8..beeb9dfe5d32e 100644
--- a/superset-frontend/src/components/Select/Select.stories.tsx
+++ b/superset-frontend/src/components/Select/Select.stories.tsx
@@ -460,7 +460,7 @@ AsyncSelect.args = {
   pageSize: 10,
   withError: false,
   withInitialValue: false,
-  tokenSeperators: ['\n', '\t', ';'],
+  tokenSeparators: ['\n', '\t', ';'],
 };
 
 AsyncSelect.argTypes = {
diff --git a/superset-frontend/src/components/Select/Select.tsx b/superset-frontend/src/components/Select/Select.tsx
index 1a73024590e47..28507744045f4 100644
--- a/superset-frontend/src/components/Select/Select.tsx
+++ b/superset-frontend/src/components/Select/Select.tsx
@@ -63,6 +63,7 @@ type PickedSelectProps = Pick<
   | 'onDropdownVisibleChange'
   | 'placeholder'
   | 'showSearch'
+  | 'tokenSeparators'
   | 'value'
 >;
 
@@ -149,11 +150,6 @@ export interface SelectProps extends PickedSelectProps {
    * Undefined by default.
    */
   fetchOnlyOnSearch?: boolean;
-  /**
-   * It defines a customized token separators.
-   * If it is not defined, will use the default value.
-   */
-  tokenSeperators?: string[];
   /**
    * It provides a callback function when an error
    * is generated after a request is fired.
@@ -293,8 +289,8 @@ const Select = ({
   placeholder = t('Select ...'),
   showSearch = true,
   sortComparator = defaultSortComparator,
+  tokenSeparators,
   value,
-  tokenSeperators,
   ...props
 }: SelectProps) => {
   const isAsync = typeof options === 'function';
@@ -761,7 +757,7 @@ const Select = ({
         placeholder={placeholder}
         showSearch={shouldShowSearch}
         showArrow
-        tokenSeparators={tokenSeperators || TOKEN_SEPARATORS}
+        tokenSeparators={tokenSeparators || TOKEN_SEPARATORS}
         value={selectValue}
         suffixIcon={getSuffixIcon()}
         menuItemSelectedIcon={
diff --git a/superset-frontend/src/explore/components/controls/SelectControl.jsx b/superset-frontend/src/explore/components/controls/SelectControl.jsx
index 25ea9a4075df9..7b2bb9571d058 100644
--- a/superset-frontend/src/explore/components/controls/SelectControl.jsx
+++ b/superset-frontend/src/explore/components/controls/SelectControl.jsx
@@ -52,7 +52,7 @@ const propTypes = {
   options: PropTypes.array,
   placeholder: PropTypes.string,
   filterOption: PropTypes.func,
-  tokenSeperators: PropTypes.arrayOf(PropTypes.string),
+  tokenSeparators: PropTypes.arrayOf(PropTypes.string),
 
   // ControlHeader props
   label: PropTypes.string,
@@ -179,7 +179,7 @@ export default class SelectControl extends React.PureComponent {
       optionRenderer,
       showHeader,
       value,
-      tokenSeperators,
+      tokenSeparators,
       // ControlHeader props
       description,
       renderTrigger,
@@ -245,7 +245,7 @@ export default class SelectControl extends React.PureComponent {
       placeholder,
       sortComparator: this.props.sortComparator || propertyComparator('order'),
       value: getValue(),
-      tokenSeperators,
+      tokenSeparators,
     };
 
     return (
diff --git a/superset-frontend/src/explore/components/controls/SelectControl.test.jsx b/superset-frontend/src/explore/components/controls/SelectControl.test.jsx
index 0421ccf9f9f6a..66e208578cfdb 100644
--- a/superset-frontend/src/explore/components/controls/SelectControl.test.jsx
+++ b/superset-frontend/src/explore/components/controls/SelectControl.test.jsx
@@ -78,10 +78,10 @@ describe('SelectControl', () => {
       expect(wrapper.find(SelectComponent).prop('allowNewOptions')).toBe(false);
     });
 
-    it('renders with tokenSeperators', () => {
-      wrapper.setProps({ tokenSeperators: ['\n', '\t', ';'] });
+    it('renders with tokenSeparators', () => {
+      wrapper.setProps({ tokenSeparators: ['\n', '\t', ';'] });
       expect(wrapper.find(SelectComponent)).toExist();
-      expect(wrapper.find(SelectComponent).prop('tokenSeperators')).toEqual(
+      expect(wrapper.find(SelectComponent).prop('tokenSeparators')).toEqual(
         expect.arrayContaining([expect.any(String)]),
       );
     });

From 7df3898ebfcf17efb4cfac17086f6982a2b752f6 Mon Sep 17 00:00:00 2001
From: smileydev <47900232+prosdev0107@users.noreply.github.com>
Date: Tue, 8 Mar 2022 04:36:37 -0500
Subject: [PATCH 7/8] Update Select.tsx

---
 superset-frontend/src/components/Select/Select.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/src/components/Select/Select.tsx b/superset-frontend/src/components/Select/Select.tsx
index 28507744045f4..2736d8b170c17 100644
--- a/superset-frontend/src/components/Select/Select.tsx
+++ b/superset-frontend/src/components/Select/Select.tsx
@@ -292,7 +292,8 @@ const Select = ({
   tokenSeparators,
   value,
   ...props
-}: SelectProps) => {
+}: SelectProps,
+ref: RefObject<HTMLInputElement>,) => {
   const isAsync = typeof options === 'function';
   const isSingleMode = mode === 'single';
   const shouldShowSearch = isAsync || allowNewOptions ? true : showSearch;

From efffa46b67739b21a0a0e02e742c7fbb6d97e7a4 Mon Sep 17 00:00:00 2001
From: Talyor Chen <prosdev0107@outlook.com>
Date: Wed, 9 Mar 2022 08:55:21 -0500
Subject: [PATCH 8/8] fix(explore comma): make to run lint fix

---
 .../src/components/Select/Select.tsx          | 56 ++++++++++---------
 1 file changed, 29 insertions(+), 27 deletions(-)

diff --git a/superset-frontend/src/components/Select/Select.tsx b/superset-frontend/src/components/Select/Select.tsx
index 2736d8b170c17..7a7485504206d 100644
--- a/superset-frontend/src/components/Select/Select.tsx
+++ b/superset-frontend/src/components/Select/Select.tsx
@@ -267,33 +267,35 @@ const getQueryCacheKey = (value: string, page: number, pageSize: number) =>
  * Each of the categories come with different abilities. For a comprehensive guide please refer to
  * the storybook in src/components/Select/Select.stories.tsx.
  */
-const Select = ({
-  allowNewOptions = false,
-  ariaLabel,
-  fetchOnlyOnSearch,
-  filterOption = true,
-  header = null,
-  invertSelection = false,
-  labelInValue = false,
-  lazyLoading = true,
-  loading,
-  mode = 'single',
-  name,
-  notFoundContent,
-  onError,
-  onChange,
-  onClear,
-  optionFilterProps = ['label', 'value'],
-  options,
-  pageSize = DEFAULT_PAGE_SIZE,
-  placeholder = t('Select ...'),
-  showSearch = true,
-  sortComparator = defaultSortComparator,
-  tokenSeparators,
-  value,
-  ...props
-}: SelectProps,
-ref: RefObject<HTMLInputElement>,) => {
+const Select = (
+  {
+    allowNewOptions = false,
+    ariaLabel,
+    fetchOnlyOnSearch,
+    filterOption = true,
+    header = null,
+    invertSelection = false,
+    labelInValue = false,
+    lazyLoading = true,
+    loading,
+    mode = 'single',
+    name,
+    notFoundContent,
+    onError,
+    onChange,
+    onClear,
+    optionFilterProps = ['label', 'value'],
+    options,
+    pageSize = DEFAULT_PAGE_SIZE,
+    placeholder = t('Select ...'),
+    showSearch = true,
+    sortComparator = defaultSortComparator,
+    tokenSeparators,
+    value,
+    ...props
+  }: SelectProps,
+  ref: RefObject<HTMLInputElement>,
+) => {
   const isAsync = typeof options === 'function';
   const isSingleMode = mode === 'single';
   const shouldShowSearch = isAsync || allowNewOptions ? true : showSearch;