renderInput()

in src/select/select-component.tsx [718:804]

• 81 lines of code
• 15 McCabe index (conditional complexity)

  renderInput(listboxId: string) {
    const { overrides = {} } = this.props;
    const [InputContainer, inputContainerProps] = getOverrides(
      overrides.InputContainer,
      StyledInputContainer
    );
    const sharedProps = this.getSharedProps();
    const isOpen = this.state.isOpen;
    // @ts-ignore
    const selected = this.getValueArray(this.props.value)
      // @ts-ignore
      .map((v) => v[this.props.labelKey])
      .join(', ');
    const selectedLabel = selected.length ? `Selected ${selected}. ` : '';
    const label = `${selectedLabel}${this.props['aria-label'] || ''}`;

    if (!this.props.searchable) {
      return (
        <InputContainer
          aria-activedescendant={this.state.activeDescendant}
          aria-describedby={this.props['aria-describedby']}
          aria-errormessage={this.props['aria-errormessage']}
          aria-disabled={this.props.disabled}
          aria-labelledby={this.props['aria-labelledby']}
          aria-label={label}
          aria-owns={this.state.isOpen ? listboxId : null}
          aria-required={this.props.required || null}
          onFocus={this.handleInputFocus}
          tabIndex={0}
          {...sharedProps}
          {...inputContainerProps}
        >
          {/* $FlowExpectedError[cannot-spread-inexact] */}
          <input
            aria-hidden
            // @ts-ignore
            id={this.props.id || null}
            ref={this.handleInputRef}
            style={{
              opacity: 0,
              width: 0,
              overflow: 'hidden',
              border: 'none',
              padding: 0,
            }}
            tabIndex={-1}
            {...(overrides.Input
              ? overrides.Input.props
                ? // $FlowExpectedError[not-an-object]
                  overrides.Input.props
                : {}
              : {})}
          />
        </InputContainer>
      );
    }

    return (
      <InputContainer {...sharedProps} {...inputContainerProps}>
        {/* @ts-ignore */}
        <AutosizeInput
          aria-activedescendant={this.state.activeDescendant}
          aria-autocomplete="list"
          aria-controls={this.state.isOpen ? listboxId : null}
          aria-describedby={this.props['aria-describedby']}
          aria-errormessage={this.props['aria-errormessage']}
          aria-expanded={isOpen}
          aria-haspopup="listbox"
          aria-label={label}
          aria-labelledby={this.props['aria-labelledby']}
          aria-required={this.props.required || null}
          disabled={this.props.disabled || null}
          id={this.props.id || null}
          inputRef={this.handleInputRef}
          onChange={this.handleInputChange}
          onFocus={this.handleInputFocus}
          overrides={{ Input: overrides.Input }}
          // @ts-ignore
          required={(this.props.required && !this.props.value.length) || null}
          role="combobox"
          value={this.state.inputValue}
          tabIndex={0}
          {...sharedProps}
        />
      </InputContainer>
    );
  }