When setting the MenuPortalTarget prop to document.body it breaks the functionality of correctly scrolling/focusing on the selected Item when it is at the bottom/out of view in the options list.
Example Code from the sandbox:
<Select className="basic-single" classNamePrefix="select" defaultValue={colourOptions[0]} isDisabled={isDisabled} isLoading={isLoading} isClearable={isClearable} isRtl={isRtl} isSearchable={isSearchable} name="color" options={colourOptions} menuPortalTarget={document.body} />
Image of Silver which is the last option not showing when it is selected and the select is opened again
Switching to menuPortalTarget={null} resolves the issue
When setting the MenuPortalTarget prop to document.body it breaks the functionality of correctly scrolling/focusing on the selected Item when it is at the bottom/out of view in the options list. Example Code from the sandbox:
<Select className="basic-single" classNamePrefix="select" defaultValue={colourOptions[0]} isDisabled={isDisabled} isLoading={isLoading} isClearable={isClearable} isRtl={isRtl} isSearchable={isSearchable} name="color" options={colourOptions} menuPortalTarget={document.body} />Image of Silver which is the last option not showing when it is selected and the select is opened again
Switching to menuPortalTarget={null} resolves the issue