CODEWITHSUNDEEP
reactjsreact-select
Snehal
Snehal

Reputation: 153

React-select options shows default blue background

I have created a select component using react-select. I need to append a badge to the option who's available value is false. I have achieved it using -

  const formatOptionLabel = ({ code, name, available }) => (
      <div className="ds-select-distibutor-step-container format-option" style={{ display: "flex", cursor:"none" }}>
        <div>{name}</div>
        {!available ?
        <div className="format-label" style={{ borderRadius: "12px" ,marginLeft: "auto", color: "#fff" , backgroundColor: "#aaa", padding: "2px 10px", fontSize:"12px"}}>
        <span>Coming Soon</span>
        </div>
        : ''}
      </div>
     );

Following json comes at run time, which I map and use as options-

const options= [
    {code:"abc",name:"abc",rank:0,available:true},
    {code:"xyz",name:"xyz",rank:0,available:false},
    {code:"pqr",name:"pqr",rank:0,available:true}]

And following is my custom select component

     <Field 
              id="selectedDistributor"
              name="selectedDistributor" 
              component={customSelect} 
              options={sortBy(options, 'name').map(({ code, name, available}) => ({ code, name, available }))}
              formatOptionLabel={formatOptionLabel}
              className="select-step"
              placeholder="abc"
              touched={false}
              defaultValue="abc"
              requiredField
              >
    </Field>
    
    
     <FieldWrapper
        label={label}
        requiredField={requiredField}
        touched={touched}
        forId={inputId}
        >
        <Select
          {...input}
          id={inputId}
          disabled={isEditMode || disabled}
          onChange={value => input.onChange(value.code)}
          formatOptionLabel={formatOptionLabel}
          options={options}
          placeholder={placeholder}
          value={input.code}
          className={`input-components-select ${className}`}
        >
          </Select>
        </FieldWrapper>

enter code here

Everything is almost working but when I select the option, the background of all the options turns into blue, I tried making changes and found that if I pass the 'value' as a key of JSON instead of 'name' in the option this error goes away. But I can't use it since the json is coming from the backend and its dynamic.

Could anybody please suggest what should be done so that the background doesn't change? I have attached images for reference

first time enter image description here

after selecting enter image description here

Upvotes: 14

Views: 2933

Answers (1)

Tu Le Thanh
Tu Le Thanh

Reputation: 661

I faced the same problem and I found that you need to declare a function getOptionValue as the Select's props. In your example, it should be like this

<Select
   {...input}
   id={inputId}
   disabled={isEditMode || disabled}
   onChange={value => input.onChange(value.code)}
   formatOptionLabel={formatOptionLabel}
   options={options}
   placeholder={placeholder}
   value={input.code}
   getOptionValue={(option) => option.code} // changes here!!!
   className={`input-components-select ${className}`}
   >
</Select>

This function is used for comparison to highlight the currently selected option in the list. You can check more details in the discussion here https://github.com/JedWatson/react-select/issues/3388

Upvotes: 21

Related Questions