keep placeholder on multiselect (#11289)

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

@@ -166,7 +166,7 @@ export default class SelectControl extends React.PureComponent {
       });
     }
     if (props.allowAll === true && props.multi === true) {
-      if (options.findIndex(o => this.isMetaSelectAllOption(o)) < 0) {
+      if (!this.optionsIncludesSelectAll(options)) {
         options.unshift(this.createMetaSelectAllOption());
       }
     } else {
@@ -189,6 +189,30 @@ export default class SelectControl extends React.PureComponent {
     return o.meta && o.meta === true && o.label === 'Select All';
   }
 
+  optionsIncludesSelectAll(o) {
+    return o.findIndex(o => this.isMetaSelectAllOption(o)) >= 0;
+  }
+
+  optionsRemaining() {
+    const { options } = this.state;
+    const { value } = this.props;
+    // if select is multi/value is array, we show the options not selected
+    let remainingOptions = Array.isArray(value)
+      ? options.length - value.length
+      : options.length;
+    if (this.optionsIncludesSelectAll(options)) {
+      remainingOptions -= 1;
+    }
+    return remainingOptions;
+  }
+
+  createPlaceholder() {
+    const optionsRemaining = this.optionsRemaining();
+    const placeholder =
+      this.props.placeholder || t('%s option(s)', optionsRemaining);
+    return optionsRemaining ? placeholder : '';
+  }
+
   createMetaSelectAllOption() {
     const option = { label: 'Select All', meta: true };
     option[this.props.valueKey] = 'Select All';
@@ -197,34 +221,51 @@ export default class SelectControl extends React.PureComponent {
 
   render() {
     //  Tab, comma or Enter will trigger a new option created for FreeFormSelect
-    const placeholder =
-      this.props.placeholder || t('%s option(s)', this.state.options.length);
+    const {
+      autoFocus,
+      clearable,
+      disabled,
+      filterOption,
+      isLoading,
+      menuPlacement,
+      menuPortalTarget,
+      menuPosition,
+      name,
+      noResultsText,
+      onFocus,
+      optionRenderer,
+      promptTextCreator,
+      value,
+      valueKey,
+      valueRenderer,
+    } = this.props;
+    const placeholder = this.createPlaceholder();
     const isMulti = this.props.isMulti || this.props.multi;
 
     const selectProps = {
-      autoFocus: this.props.autoFocus,
-      isMulti,
-      selectRef: this.getSelectRef,
-      name: `select-${this.props.name}`,
-      placeholder,
-      options: this.state.options,
-      value: this.props.value,
-      labelKey: 'label',
-      valueKey: this.props.valueKey,
-      clearable: this.props.clearable,
-      isLoading: this.props.isLoading,
-      onChange: this.onChange,
-      onFocus: this.props.onFocus,
-      optionRenderer: this.props.optionRenderer,
-      valueRenderer: this.props.valueRenderer,
-      noResultsText: this.props.noResultsText,
-      disabled: this.props.disabled,
-      filterOption: this.props.filterOption,
-      promptTextCreator: this.props.promptTextCreator,
+      autoFocus,
+      clearable,
+      disabled,
+      filterOption,
       ignoreAccents: false,
-      menuPortalTarget: this.props.menuPortalTarget,
-      menuPosition: this.props.menuPosition,
-      menuPlacement: this.props.menuPlacement,
+      isLoading,
+      isMulti,
+      labelKey: 'label',
+      menuPlacement,
+      menuPortalTarget,
+      menuPosition,
+      name: `select-${name}`,
+      noResultsText,
+      onChange: this.onChange,
+      onFocus,
+      optionRenderer,
+      options: this.state.options,
+      placeholder,
+      promptTextCreator,
+      selectRef: this.getSelectRef,
+      value,
+      valueKey,
+      valueRenderer,
     };
 
     let SelectComponent;