@material-ui/lab#AutocompleteRenderGroupParams TypeScript Examples

render() {
    const DropdownIcon = this.props.dropdownIcon || ArrowDropDownIcon;
    const onInputChange = (e, val: string, reason: AutocompleteInputChangeReason) => {
      if (reason === 'reset') return; // Prevent setting text value in textfield
      if (this.props.onInputChange) {
        this.props.onInputChange(val, reason);
      }
      if (this.props.inputValue === undefined) {
        this.setState({ inputValue: val });
      }
    };
    const renderTags = (value: Label[], getTagProps?: AutocompleteGetTagProps) => this.props.showTags === false ? null : value.map((option, index) => (
      <Fade key={option.value} in={true}>
        {this.props.bareTags ? (
          <div
            className={classNames(
              this.props.classes.chip,
              this.props.classes.chipBare,
            )}
            style={{
              color: option.color,
            }}
            {...(getTagProps ? getTagProps({ index }) : {})}
          >{option.label}</div>
        ) : (
          <Chip
            className={this.props.classes.chip}
            variant='outlined'
            label={option.label}
            size='small'
            style={{
              color: option.color,
            }}
            {...(getTagProps ? getTagProps({ index }) : {})}
          />
        )}
      </Fade>
    ));
    return (
      <Autocomplete<LabelInternal, boolean, boolean, boolean>
        freeSolo={!this.props.disableInput}
        autoHighlight
        multiple={!!this.props.isMulti}
        value={this.props.isMulti ? this.props.value : (this.props.value[0] || null)}
        onChange={(e, val, reason) => {
          // Convert create label to create-option
          var createLabel: LabelInternal | undefined;
          if (this.props.isMulti && val instanceof Array) {
            createLabel = (val as LabelInternal[]).find(label => label.isCreateOption);
          } else if (!this.props.isMulti && val instanceof Object && (val as LabelInternal).isCreateOption) {
            createLabel = (val as LabelInternal);
          }
          if (createLabel) {
            reason = 'create-option';
            val = createLabel.value;
          }

          if (reason === 'create-option') {
            var createdText: string = '';
            if (typeof val === 'string') {
              createdText = val;
            } else if (Array.isArray(val)) {
              const valParsed = val[val.length - 1];
              if (typeof valParsed === 'string') {
                createdText = valParsed;
              }
            }
            !!createdText && this.props.onValueCreate && this.props.onValueCreate(createdText);
            onInputChange(undefined, '', 'clear');
          } else if (reason === 'clear' || reason === 'blur') {
            this.props.onValueChange([]);
          } else if (reason === 'select-option' || reason === 'remove-option') {
            this.props.onValueChange(!val ? [] : (this.props.isMulti ? val as Label[] : [val as Label]));
            if (!this.props.disableClearOnValueChange) {
              onInputChange(undefined, '', 'clear');
            }
          }
        }}
        disableCloseOnSelect={this.props.disableCloseOnSelect}
        filterSelectedOptions={true}
        filterOptions={(options, params) => {
          // Sometimes autocomplete decides to pre-filter, so use options from props
          var filtered: LabelInternal[] = [...this.props.options];

          if (!this.props.disableFilter) {
            filtered = filterOptions(options, params);
          }

          // Suggest the creation of a new value
          if (!!this.props.onValueCreate && params.inputValue !== '') {
            const createLabel = {
              label: this.props.formatCreateLabel
                ? this.props.formatCreateLabel(params.inputValue)
                : `Add "${params.inputValue}"`,
              value: params.inputValue,
              groupBy: '__EMPTY__',
              isCreateOption: true,
            };
            if (this.props.showCreateAtTop) {
              filtered.unshift(createLabel);
            } else {
              filtered.push(createLabel);
            }
          }

          // Header
          if (!!this.props.formatHeader) {
            const header = this.props.formatHeader(params.inputValue);
            if (header) {
              filtered.unshift({
                label: header,
                value: '__HEADER__',
                groupBy: '__HEADER__',
                disabled: true,
              });
            }
          }

          // Add loading
          if (this.props.loading) {
            filtered.push({
              label: 'Loading…',
              value: '__HEADER__',
              groupBy: '__HEADER__',
              disabled: true,
            });
          }

          if (this.props.noOptionsMessage && filtered.length === 0) {
            filtered.push({
              label: this.props.noOptionsMessage,
              value: '__HEADER__',
              groupBy: '__HEADER__',
              disabled: true,
            });
          }

          return filtered;
        }}
        popupIcon={DropdownIcon === null ? null : (
          <DropdownIcon
            fontSize='small'
            color='inherit'
            className={this.props.value.length > 0
              ? this.props.classes.dropdownIconWithTags
              : this.props.classes.dropdownIconWithoutTags}
          />
        )}
        forcePopupIcon={this.props.forceDropdownIcon !== undefined ? this.props.forceDropdownIcon : (!!this.props.dropdownIcon || 'auto')}
        options={this.props.options}
        getOptionLabel={option => option.filterString || option.value}
        getOptionSelected={(option, value) => option.value === value.value}
        inputValue={this.props.inputValue !== undefined
          ? this.props.inputValue
          : (this.state.inputValue || '')}
        onInputChange={onInputChange}
        style={this.props.style}
        className={this.props.className}
        limitTags={this.props.limitTags}
        disabled={this.props.disabled}
        getOptionDisabled={option => !!option.disabled}
        groupBy={this.props.group ? (label: Label) => label.groupBy || label.value[0] : undefined}
        renderGroup={this.props.group ? (params: AutocompleteRenderGroupParams) => (
          <div className={classNames(this.props.classes.group, params.group === '__HEADER__' && this.props.classes.header)}>
            {params.group && params.group !== '__EMPTY__' && params.group !== '__HEADER__' && (
              <Typography key={params.key} variant='overline' className={this.props.classes.menuHeader}>{params.group}</Typography>
            )}
            {params.children}
          </div>
        ) : undefined}
        getLimitTagsText={this.props.limitTags === 0 ? more => null : undefined}
        handleHomeEndKeys
        openOnFocus
        onFocus={this.props.onFocus}
        onBlur={e => {
          if (this.props.clearOnBlur) {
            onInputChange(undefined, '', 'clear');
          }
        }}
        renderOption={(option: Label, { selected }) => (
          <Typography
            noWrap
            style={{
              fontWeight: selected ? 'bold' : undefined,
              color: option.color,
            }}
            component='div'
          >
            {(option.value !== '__HEADER__' && this.props.renderOption)
              ? this.props.renderOption(option, selected)
              : option.label}
          </Typography>
        )}
        renderTags={renderTags}
        open={this.props.menuIsOpen}
        disableClearable={this.props.disableClearable || this.props.value.length === 0}
        onOpen={this.props.menuOnChange ? () => this.props.menuOnChange && this.props.menuOnChange(true) : undefined}
        onClose={this.props.menuOnChange ? () => this.props.menuOnChange && this.props.menuOnChange(false) : undefined}
        classes={{
          ...this.props.autocompleteClasses,
          root: classNames(this.props.classes.autocomplete, this.props.autocompleteClasses?.root),
          focused: classNames(this.props.classes.autocompleteFocused, this.props.autocompleteClasses?.focused),
          popupIndicatorOpen: classNames(!!this.props.dropdownIcon && this.props.classes.dropdownIconDontFlip, this.props.autocompleteClasses?.popupIndicator),
          endAdornment: classNames(this.props.classes.endAdornment, this.props.autocompleteClasses?.endAdornment),
          input: classNames(this.props.classes.input, this.props.autocompleteClasses?.input),
          inputRoot: classNames(this.props.classes.inputRoot, this.props.autocompleteClasses?.inputRoot),
          popper: classNames(this.props.classes.popper, this.props.autocompleteClasses?.popper),
          listbox: classNames(this.props.classes.popperListbox, this.props.autocompleteClasses?.listbox),
          tag: classNames(this.props.classes.tag, this.props.autocompleteClasses?.tag),
          clearIndicator: classNames(!!this.props.clearIndicatorNeverHide && this.props.classes.clearIndicatorNeverHide, this.props.autocompleteClasses?.clearIndicator),
        }}
        PopperComponent={getSelectionPopper(this.props.PopperProps)}
        renderInput={(params) => {
          // Remove limitTags span element since it's just taking up space
          const paramsStartAdornment = (params.InputProps.startAdornment as Array<any>);
          if (this.props.limitTags === 0
            && paramsStartAdornment
            && paramsStartAdornment[0]['type'] === 'span') {
            paramsStartAdornment.shift();
          }
          const TextFieldCmpt = this.props.TextFieldComponent || TextField;
          return (
            <TextFieldCmpt
              label={this.props.label}
              helperText={this.props.errorMsg || this.props.helperText}
              placeholder={(!!this.props.bareTags && this.props.value.length > 0)
                ? undefined
                : this.props.placeholder}
              error={!!this.props.errorMsg}
              {...params}
              {...this.props.TextFieldProps}
              InputLabelProps={{
                ...params.InputLabelProps,
                ...this.props.TextFieldProps?.InputLabelProps,
              }}
              inputProps={{
                ...params.inputProps,
                ...this.props.TextFieldProps?.inputProps,
                style: {
                  minWidth: this.props.inputMinWidth === undefined
                    ? (this.props.disableInput ? 0 : 50)
                    : this.props.inputMinWidth,
                  ...this.props.TextFieldProps?.inputProps?.style,
                  maxHeight: this.props.disableInput ? 20 : undefined,
                },
              }}
              InputProps={{
                ...params.InputProps,
                ...this.props.TextFieldProps?.InputProps,
                readOnly: this.props.disableInput || this.props.TextFieldProps?.InputProps?.readOnly,
                startAdornment: (
                  <>
                    {this.props.TextFieldProps?.InputProps?.endAdornment || null}
                    {!!this.props.showTags
                      && !this.props.isMulti
                      && this.props.value.length > 0
                      && renderTags(this.props.value)}
                    {params.InputProps.startAdornment}
                    {!!this.props.alwaysWrapChipsInput && !!paramsStartAdornment?.length && (
                      <div className={this.props.classes.flexWrapBreak} />
                    )}
                  </>
                ),
                endAdornment: (
                  <>
                    {this.props.TextFieldProps?.InputProps?.endAdornment || null}
                    {params.InputProps.endAdornment}
                  </>
                ),
              }}
            />
          );
        }}
      />
    );
  }