Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add default value/label for Select.Async #1180

Closed
wants to merge 2 commits into from

Conversation

yonaichin
Copy link

@yonaichin yonaichin commented Sep 1, 2016

add default value/label props support for Select.Async

in src/Async.js

render () {
        let { noResultsText, selectedValue, selectedLabel } = this.props; // add selectedValue , selectedLabel
        let { isLoading, options } = this.state;
        if (this.props.isLoading) isLoading = true;
        let placeholder = isLoading ? this.props.loadingPlaceholder : this.props.placeholder;
        if (isLoading) {
                noResultsText = this.props.searchingText;
        } else if (!options.length && this._lastInput.length < this.props.minimumInput) {
                noResultsText = this.props.searchPromptText;
        }
        // set default value for Select Component
        if (selectedValue !== '' && selectedLabel !== '') {
          options = [{
            value: selectedValue,
            label: selectedLabel
          }];
        }
        return (
                <Select
                        {...this.props}
                        ref="select"
                        isLoading={isLoading}
                        noResultsText={noResultsText}
                        onInputChange={this.loadOptions}
                        options={options}
                        placeholder={placeholder}
                        />
        );
}

with this workaround, you'll be able to set default value like this

import Select from 'react-select';

/*
 * assuming the API returns something like this:
 *   const json = [
 *     { value: 'one', label: 'One' },
 *     { value: 'two', label: 'Two' }
 *   ]
 */

const getOptions = (input) => {
  return fetch(`/users/${input}.json`)
    .then((response) => {
      return response.json();
    }).then((json) => {
      return { options: json };
    });
}

<Select.Async
    name="form-field-name"
    value="one"
    loadOptions={getOptions}
    selectedLabel="default label display on Select.Async"
    selectedValue ="default_value"
/>

@dstuecken
Copy link

dstuecken commented Sep 8, 2016

+1

Having the same issue and need a solution right now :)

What i tried to do was passing an array with one option to the options param and setting the value accordingly, but it seems like this gets ignored in favor of the loadOptions param. What about just making this behaviour possible?

@bvaughn
Copy link
Collaborator

bvaughn commented Sep 18, 2016

As of PR #1226, Select.Async now supports default value and options properties. Closing this PR as it's already been fixed as the result of another refactor.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants