isSelected not working

I am trying to change the font weight to bold when option is being selected but isSelected is not working. Here is the codesandbox link https://codesandbox.io/s/react-codesandboxer-example-9gpp4

I try to debug it with react-devtools it’s not getting isFocused isDisabled and everything else but not isSelected is not there.

Props

{
  "value": {
    "label": "Off Trade",
    "value": "offTrade",
    "id": 2,
    "questionKey": 3
  },
  "options": [
    "Object",
    "Object",
    "Object",
    "Object"
  ],
  "styles": {
    "control": "control()",
    "option": "option()",
    "indicatorSeparator": "indicatorSeparator()",
    "dropdownIndicator": "dropdownIndicator()"
  },
  "onChange": "fn()",
  "inputValue": "",
  "menuIsOpen": false,
  "onInputChange": "fn()",
  "onMenuClose": "fn()",
  "onMenuOpen": "fn()",
  "backspaceRemovesValue": true,
  "blurInputOnSelect": false,
  "captureMenuScroll": true,
  "closeMenuOnSelect": true,
  "closeMenuOnScroll": false,
  "components": {},
  "controlShouldRenderValue": true,
  "escapeClearsValue": false,
  "filterOption": "fn()",
  "formatGroupLabel": "formatGroupLabel()",
  "getOptionLabel": "getOptionLabel()",
  "getOptionValue": "getOptionValue()",
  "isDisabled": false,
  "isLoading": false,
  "isMulti": false,
  "isRtl": false,
  "isSearchable": true,
  "isOptionDisabled": "isOptionDisabled()",
  "loadingMessage": "loadingMessage()",
  "maxMenuHeight": 300,
  "minMenuHeight": 140,
  "menuPlacement": "bottom",
  "menuPosition": "absolute",
  "menuShouldBlockScroll": false,
  "menuShouldScrollIntoView": true,
  "noOptionsMessage": "noOptionsMessage()",
  "openMenuOnFocus": false,
  "openMenuOnClick": true,
  "pageSize": 5,
  "placeholder": "Select...",
  "screenReaderStatus": "screenReaderStatus()",
  "tabIndex": "0",
  "tabSelectsValue": true
}

State

{
  "ariaLiveSelection": "option Off Trade, selected.",
  "ariaLiveContext": "Select is focused ,type to refine list, press Down to open the menu, ",
  "focusedValue": null,
  "inputIsHidden": false,
  "isFocused": false,
  "menuOptions": {
    "render": "Array[0]",
    "focusable": "Array[0]"
  },
  "selectValue": [
    {
      "label": "Off Trade",
      "value": "offTrade",
      "id": 2,
      "questionKey": 3
    }
  ]
}

[luksari]

I suppose that isSelected property doesn’t exist in Select not marked as isMultiple. So you can use state.data === state.selectProps.value in single choice Select to apply different style based on state.
Example:

 option: (provided, state) => {
    return ({
      ...provided,
      color: state.data === state.selectProps.value ? `${theme.colors.primaryText}` : `${theme.colors.disabledText}`,
      '&:hover': {
        color: theme.colors.primaryText,
        background: theme.colors.disabledBackground,
      },
    });
  },```

[crhayes]

@sarabs3 You can inspect the contents of state to see if there is anything useful for your use case.

isSelected exists in the option state but not in the control state, which I think makes, given that the options are what are actually selected.

If you inspect the state in the control method you’ll see the property hasValue. That should work for your use case:

control: (styles, state) => ({
  ...styles,
  fontSize: state.hasValue ? 40 : 20
})