How can i trigger async search on button click?

[MohammedSaberMohammed]

Hello everyone,
Current behavior:
I'm using react-select/async the first request is initiated by using of defaultOptions: true ---> to load on Mount but after that when i type anything in the input the search functionality triggered automatically and the loading icon shows

Wanted Behavior

1. initially fire request on Mount
2. when i type in the input search should not be triggered unless i press on a button, this button above the loader icon
3. when i hit the button it should be hidden and the search icon should be shown and viseversa.
4. along with isClearable Functionality

my component is:

import AsyncSelect from 'react-select/async';
// Event System
import Event from '~/Services/Event';
const event = new Event();

class ServerSelectAutocomplete extends Component {
  state = {
    inputValue: '',
    openMenu: false,
  };

  get(inputValue = '') { 
    const { searchProp, additionalPayload } = this.props;

    this.entity.get({
      additionalPayload,
      [searchProp]: inputValue
    });
  }

  onEntityReceived(data) {
    const { targetResponseKey } = this.props;
    const mutatedData = data[targetResponseKey] || data || [];
    const selectData = this.getSelectData(mutatedData);

    event.notify('data-fetched', selectData);
  }

  getSelectData = data => { 
    const { labelProp, valueProp } = this.props;
    const list = [];
    
    if (data && !isEmpty(data)) {
      data.forEach(item => list.push({
        label: item[labelProp] || '',
        value: item[valueProp] || ''
      }));
    }

    return list;
  }

  onSelectChange = option => {
    const { name } = this.props;
    this.setState({ option });
    console.log('onSelectChange', option );
    this.props.onChange(name, option);
    // this.props.onChangeServerAutocomplete(option);
  }

  loadOptions = (inputValue, callback) => { 

    // if (this.entity) { 
    this.get(inputValue);
    return new Promise(resolve => event.on('data-fetched', resolve));
    // }
  }

  get value() {
    const { value } = this.props;

    return (value && !isEmpty(value)) && value;
  }

  render() {
    return (
      <Entity
        storeId={storeId}
        entityRef={ref => { this.entity = ref; }}
        onEntityReceived={data => this.onEntityReceived(data)}
        onEntityReceivedError={data => this.onEntityReceivedError(data)}
        render={store => (
          <FormControl
            className={classes.formControl}
            fullWidth
            error={error}
          >
            <div className={classes.root}>
              <AsyncSelect
                value={this.value}
                loadOptions={this.loadOptions}
                cacheOptions={cacheOptions}
                defaultOptions={defaultOptions} // determin when the firstRequest is loaded [ if true  => fetch immedietly from BE ]
                onChange={option => this.onSelectChange(option)}
                isClearable={clearable}
                isMulti={isMulti}
                {...reactSelectProps}
              />
            </div>

          </FormControl>
        )}
      />
    );
  }
}

Thanks in advance.

[ebonow]

Greetings @MohammedSaberMohammed,

Since loadOptions is triggered when the inputValue changes and is also likely tied to the AsyncSelect being focused (though this might be an incorrect assumption). It's likely possible, but seems more complex than using a regular Select.

A non-async select would give you more flexibility as to when and how you are retrieving options. To mimic the functionality you suggest, you would likely need to:

1. Add options to state
2. Fetch default options onMount
3. Add isLoading to state
4. Show/hide search button visibility on isLoading and pass as prop to Select
5. On search, do dataFetch with your input and set mapped results as new options in state

If you have any other concerns or questions about the approach, let me know and if so, putting the above code into a working codesandbox might also be helpful to iron out the implementation details.

[MohammedSaberMohammed]

@ebonow thanks a lot it works fine now and here is my component

keep in mind that is the Entity Component is responsible for sending requests only

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Select, { components } from 'react-select';
// Lodash
import isEmpty from 'lodash/isEmpty';
import isEqual from 'lodash/isEqual';
import merge from 'lodash/merge';
// Animations
import Fade from 'react-reveal/Fade';
// MUI
import { withStyles } from '@material-ui/styles';
import FormControl from '@material-ui/core/FormControl';
import Button from '@material-ui/core/Button';
import FormHelperText from '@material-ui/core/FormHelperText';
import MenuItem from '@material-ui/core/MenuItem';
import Typography from '@material-ui/core/Typography';
import TextField from '@material-ui/core/TextField';
import Paper from '@material-ui/core/Paper';
import Chip from '@material-ui/core/Chip';
import CancelIcon from '@material-ui/icons/Cancel';
// Components
import Entity from '~/Components/Entity';
import Loading from '~/Components/Loading';
// Services
import strings from '~/Services/Strings';

import styles from '../styles';

function NoOptionsMessage(props) {
  return (
    <Typography
      color="textSecondary"
      className={props.selectProps.classes.noOptionsMessage}
      {...props.innerProps}
    >
      {props.children}
    </Typography>
  );
}

function LoadingMessage(props) {
  return (
    <Typography
      color="textSecondary"
      // className={props.selectProps.classes.loadingMessage}
      style={props.getStyles('loadingMessage', props)}
      {...props.innerProps}
    >
      {props.children}
    </Typography>
  );
}

function InputComponent({ inputRef, ...props }) {
  return <div ref={inputRef} {...props} />;
}

@withStyles(styles, { withTheme: true })
class Control extends React.Component {
  render() {
    const { selectProps, innerRef, children, innerProps, classes } = this.props;
    return (
      <TextField
        fullWidth
        InputProps={{
          inputComponent: InputComponent,
          inputProps: {
            className: `${selectProps.classes.input} ${classes.autoCompleteInput}`,
            inputRef: innerRef,
            children,
            ...innerProps,
          },
        }}
        {...selectProps.textFieldProps}
        classes={{ root: classes.autoCompleteRoot }}
      />
    );
  }
}

Control.propTypes = {
  classes: PropTypes.object,
};

function Option(props) {
  return (
    <MenuItem
      buttonRef={props.innerRef}
      selected={props.isFocused}
      component="div"
      style={{
        fontWeight: props.isSelected ? 500 : 400,
      }}
      {...props.innerProps}
    >
      {props.children}
    </MenuItem>
  );
}

function Placeholder(props) {
  return (
    <Typography
      color="textSecondary"
      className={props.selectProps.classes.placeholder}
      {...props.innerProps}
    >
      {props.children}
    </Typography>
  );
}

function SingleValue(props) {
  return (
    <Typography className={props.selectProps.classes.singleValue} {...props.innerProps}>
      {props.children}
    </Typography>
  );
}

function ValueContainer(props) {
  return <div className={props.selectProps.classes.valueContainer}>{props.children}</div>;
}

function MultiValue(props) {
  return (
    <Chip
      tabIndex={-1}
      label={props.children}
      className={classNames(props.selectProps.classes.chip, {
        [props.selectProps.classes.chipFocused]: props.isFocused,
      })}
      onDelete={props.removeProps.onClick}
      deleteIcon={<CancelIcon {...props.removeProps} />}
    />
  );
}

function Menu(props) {
  return (
    <Paper square className={props.selectProps.classes.paper} {...props.innerProps} style={{ zIndex: 20 }}>
      {props.children}
    </Paper>
  );
}

const IndicatorsContainer = props => {
  const { selectProps } = props;
  const { isVisibleSearchAction, triggerSearch } = selectProps;

  return (
    <div style={{ display: 'flex' }} >
      <If condition={isVisibleSearchAction}>
        <Button
          onClick={triggerSearch}
          variant={'outlined'}
          color={'primary'}
          size={'small'}
          style={{ marginLeft: 5 }}
        >
          {strings.search}
        </Button>
      </If>
      <components.IndicatorsContainer {...props} />
    </div>
  );
};

@withStyles(styles, { withTheme: true })
class ServerSelectAutocomplete extends Component {
  // 
  state = {
    options: [],
    inputValue: '',
    // menuIsOpen: null,
    isVisibleSearchAction: true,
    cachingOptions: {}, // to store values
  };

  componentDidMount() {
    // get initialData

    this.get();
  }

  componentDidUpdate(prevProps) { 
    const { additionalPayload, forceLoadOnQueryChange } = this.props;

    /**
     * Force Load Data and don't get from cached data if
     * 1. additionalPayload ---> has been changed
     * 2. forceLoadOnQueryChange ---> is True
     */

    if (!isEqual(additionalPayload, prevProps.additionalPayload) && forceLoadOnQueryChange) { 
      this.get(true);
    }
  }

  get(forceLoad = false) {
    const { additionalPayload } = this.props;
    const { inputValue, cachingOptions } = this.state;
    const searchKeys = Object.keys(cachingOptions);

    if (searchKeys.includes(inputValue) && !forceLoad) {
      this.setState({ options: cachingOptions[inputValue] });
    } else {
      this.entity.get({
        nameQuery: inputValue,
        ...additionalPayload
      });
    }
  }

  onEntityReceived = data => {
    const { inputValue, cachingOptions } = this.state;
    const { valueProp, titleProp } = this.props;
    const options = [];
    const optionToCahe = {};

    if (!isEmpty(data)) {
      data.forEach(item => options.push({
        label: item[titleProp],
        value: item[valueProp],
      }));
    }

    optionToCahe[inputValue] = options;

    this.setState({
      options,
      // store to not call the api functionality again
      cachingOptions: merge({ ...cachingOptions }, { ...optionToCahe } )
    });
  }

  renderLoading = defaultProps => {
    const { loader } = this.props;

    return loader || <Loading {...defaultProps.innerProps} small noText />;
  }

  renderLoadingMessage = props => {
    const { loadingMessage } = this.props;

    return loadingMessage || strings.dataFetchingIsLoading;
  }

  onInputChange = (inputValue, { action }) => {
    // const isVisibleSearchAction = inputValue !== this.state.inputValue;

    // Keep the input value in case of blur, ...etc , and [delete meta]
    switch (action) {
      case 'input-change':
        this.setState({ inputValue });
        return;
      case 'menu-close':
        let menuIsOpen = undefined; 
        if (this.state.inputValue) {
          menuIsOpen = true;
        }
        this.setState({
          menuIsOpen,// append it in runtime not by default in the state [ in order not to loseInitial MenuIsOpen ]
        });
        return;
      default:
        return;
    }
  }

  get selectStyles() {
    const { theme } = this.props;

    return {
      input: base => ({
        ...base,
        color: theme.palette.text.primary,
      }),
    };
  }

  get value() { 
    const { value } = this.props;

    return !isEmpty(value) ? value : '';
  }

  render() {

    const {
      options,
      inputValue,
      menuIsOpen,
      isVisibleSearchAction
    } = this.state;

    const {
      name,
      theme,
      label,
      error,
      classes,
      storeId,
      isMulti,
      required,
      disabled,
      clearable,
      searchable,
      helperText,
      emptyString,
      rootLabelStyles,
      reactSelectProps,
      shrinkedLabelStyles,
    } = this.props;

    if (!storeId) {
      console.warn('please provide [ StoreId ] for [ ServerSelectAutocomplete ]');

      return;
    }
    console.log('this.formValues', this.value);

    return (
      <Entity
        storeId={storeId}
        entityRef={ref => { this.entity = ref; }}
        onEntityReceived={data => this.onEntityReceived(data)}
        render={store => (
          <FormControl className={classes.formControl} fullWidth>
            <div className={classes.root}>
              <Select
                id={name}
                isRtl={theme.direction === 'rtl'}
                classes={classes}
                isLoading={store.loading}
                styles={this.selectStyles}
                options={options}
                noOptionsMessage={() => strings.noOptionsMessage}
                loadingMessage={() => this.renderLoadingMessage()}
                value={this.value}
                onInputChange={this.onInputChange}
                onChange={option => {
                  console.log('option', option);
                  this.props.onChange(name, option);
                  this.props.onChangeAutocomplete(option);
                }}
                placeholder={emptyString}
                isDisabled={disabled}
                isClearable={clearable}
                isSearchable={searchable}
                isMulti={isMulti}
                menuIsOpen={menuIsOpen}
                inputValue={inputValue}
                // custom search button
                isVisibleSearchAction={(!store.loading && isVisibleSearchAction)}
                triggerSearch={() => this.get()}
                components={{
                  Control,
                  Menu,
                  MultiValue,
                  NoOptionsMessage,
                  Option,
                  Placeholder,
                  SingleValue,
                  ValueContainer,
                  LoadingIndicator: props => this.renderLoading(props),
                  LoadingMessage,
                  // To override Actions
                  IndicatorsContainer
                }}
                textFieldProps={{
                  label,
                  InputLabelProps: {
                    shrink: Boolean(emptyString || this.value) || undefined,
                    error,
                    required,
                    classes: {
                      root: rootLabelStyles || classes.textRootLabel,
                      shrink: shrinkedLabelStyles || classes.textShrinkedLabel,
                    }
                  },
                }}
                {...reactSelectProps}
              />
            </div>

            <Fade bottom when={error}>
              <FormHelperText
                id={`${name}-helper-text`}
                error={error}
              >
                {helperText}
              </FormHelperText>
            </Fade>
          </FormControl>
        )}
      />
    );
  }
}

ServerSelectAutocomplete.propTypes = {
  theme: PropTypes.object,
  classes: PropTypes.object,
  rootLabelStyles: PropTypes.object,
  reactSelectProps: PropTypes.object,
  additionalPayload: PropTypes.object,
  shrinkedLabelStyles: PropTypes.object,

  name: PropTypes.string,
  label: PropTypes.string,
  lookup: PropTypes.string,
  storeId: PropTypes.string,
  titleProp: PropTypes.string,
  valueProp: PropTypes.string,
  helperText: PropTypes.string,
  emptyString: PropTypes.string,
  loadingMessage: PropTypes.string,

  error: PropTypes.bool,
  isMulti: PropTypes.bool,
  required: PropTypes.bool,
  disabled: PropTypes.bool,
  clearable: PropTypes.bool,
  searchable: PropTypes.bool,
  displayEmpty: PropTypes.bool,
  forceLoadOnQueryChange: PropTypes.bool,

  value: PropTypes.any,
  loader: PropTypes.element,

  onChange: PropTypes.func,
  onChangeAutocomplete: PropTypes.func,
};

// PropsTypes
ServerSelectAutocomplete.defaultProps = {
  value: '',
  storeId: '',
  emptyString: '',
  loadingMessage: '',
  valueProp: 'id',
  titleProp: 'nameAr',

  isMulti: false,
  disabled: false,
  clearable: true,
  searchable: true,
  displayEmpty: false,
  forceLoadOnQueryChange: false,

  reactSelectProps: {},
  additionalPayload: {},

  rootLabelStyles: null,
  shrinkedLabelStyles: null,

  onChange() { },
  onChangeAutocomplete() { },
};

const ReactSelectPropTypes = {
  isFocused: PropTypes.bool,
  isSelected: PropTypes.bool,

  inputRef: PropTypes.func,
  innerRef: PropTypes.func,
  getStyles: PropTypes.func,

  children: PropTypes.any,

  innerProps: PropTypes.object,
  selectProps: PropTypes.object,
  removeProps: PropTypes.object,
  textFieldProps: PropTypes.object,
};

InputComponent.propTypes = ReactSelectPropTypes;

Control.propTypes = ReactSelectPropTypes;

Option.propTypes = ReactSelectPropTypes;

Placeholder.propTypes = ReactSelectPropTypes;

NoOptionsMessage.propTypes = ReactSelectPropTypes;

SingleValue.propTypes = ReactSelectPropTypes;

ValueContainer.propTypes = ReactSelectPropTypes;

MultiValue.propTypes = ReactSelectPropTypes;

Menu.propTypes = ReactSelectPropTypes;

LoadingMessage.propTypes = ReactSelectPropTypes;

IndicatorsContainer.propTypes = ReactSelectPropTypes;

export { ServerSelectAutocomplete };