fix(explore comma): make that the comma can be added by removing it from token separators…

superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx

@@ -431,6 +431,7 @@ const y_axis_format: SharedControlConfig<'SelectControl'> = {
   default: DEFAULT_NUMBER_FORMAT,
   choices: D3_FORMAT_OPTIONS,
   description: D3_FORMAT_DOCS,
+  tokenSeperators: ['\n', '\t', ';'],
   mapStateToProps: state => {
     const showWarning = state.controls?.comparison_type?.value === 'percentage';
     return {

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 = {

superset-frontend/src/components/Select/Select.tsx

@@ -149,6 +149,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.
@@ -266,35 +271,32 @@ 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,
-    onDropdownVisibleChange,
-    optionFilterProps = ['label', 'value'],
-    options,
-    pageSize = DEFAULT_PAGE_SIZE,
-    placeholder = t('Select ...'),
-    showSearch = true,
-    sortComparator = defaultSortComparator,
-    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,
+  value,
+  tokenSeperators,
+  ...props
+}: SelectProps) => {
   const isAsync = typeof options === 'function';
   const isSingleMode = mode === 'single';
   const shouldShowSearch = isAsync || allowNewOptions ? true : showSearch;
@@ -759,7 +761,7 @@ const Select = (
         placeholder={placeholder}
         showSearch={shouldShowSearch}
         showArrow
-        tokenSeparators={TOKEN_SEPARATORS}
+        tokenSeparators={tokenSeperators || TOKEN_SEPARATORS}
         value={selectValue}
         suffixIcon={getSuffixIcon()}
         menuItemSelectedIcon={

superset-frontend/src/explore/components/controls/SelectControl.jsx

@@ -52,6 +52,7 @@ const propTypes = {
   options: PropTypes.array,
   placeholder: PropTypes.string,
   filterOption: PropTypes.func,
+  tokenSeperators: PropTypes.arrayOf(PropTypes.string),
 
   // ControlHeader props
   label: PropTypes.string,
@@ -178,6 +179,7 @@ export default class SelectControl extends React.PureComponent {
       optionRenderer,
       showHeader,
       value,
+      tokenSeperators,
       // ControlHeader props
       description,
       renderTrigger,
@@ -243,6 +245,7 @@ export default class SelectControl extends React.PureComponent {
       placeholder,
       sortComparator: this.props.sortComparator || propertyComparator('order'),
       value: getValue(),
+      tokenSeperators,
     };
 
     return (

superset-frontend/src/explore/components/controls/SelectControl.test.jsx

@@ -78,6 +78,14 @@ 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', () => {