Help Needed: Material Tailwind Select Component Requires Selecting Option Twice to Display Correct Value

[Halazv2]

I'm facing an issue with a Select component in my react project. When I fetch options from an API and display them in the select component, the selected value only displays correctly if I select the option twice, also the initially selected value fetched from the backend does not show up.

Code:

       <Select
        variant="standard"
        label="Current Living Address"
        name="current_address"
        value={values.current_address}
        onChange={(val) => 
            handleChange({
              target: {
                name: "current_address",
                value: val
              }
            })
          }
        onBlur={handleBlur}
        error={Boolean(errors.current_address && touched.current_address)}
      >
        {addresses.length > 0 && (
          addresses.map((address) => (
            <Option key={address.id} value={address.id} className="capitalize">
              {address.number} - {address.street}
            </Option>
          ))
        )}
      </Select>
      {errors.current_address && touched.current_address && (
        <ErrorText error={errors.current_address} />
      )}

[Nishant-Pathak]

+1 facing the same issue.

[Cmejia49]

+1 same issue

[patiwatpanda]

+1 same issue

[alexmady]

+1 same

[r1y4h]

Select component in controlled state will not work properly if the options are not available yet on initial render. Workaround is by making sure the options are readily available first, before rendering the Select component.

Or you can add a default option as suggested by their bot support: