diff --git a/public/app/core/components/AppChrome/OrganizationSwitcher/OrganizationSelect.tsx b/public/app/core/components/AppChrome/OrganizationSwitcher/OrganizationSelect.tsx index c17f48bc4d9..fbb4d111449 100644 --- a/public/app/core/components/AppChrome/OrganizationSwitcher/OrganizationSelect.tsx +++ b/public/app/core/components/AppChrome/OrganizationSwitcher/OrganizationSelect.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/css'; -import { useState } from 'react'; +import { useMemo, useState } from 'react'; import { SelectableValue, GrafanaTheme2 } from '@grafana/data'; import { Icon, Select, useStyles2 } from '@grafana/ui'; @@ -10,12 +10,21 @@ import { OrganizationBaseProps } from './types'; export function OrganizationSelect({ orgs, onSelectChange }: OrganizationBaseProps) { const styles = useStyles2(getStyles); - const { orgName: name, orgId, orgRole: role } = contextSrv.user; - const [value, setValue] = useState>(() => ({ - label: name, - value: { role, orgId, name }, - description: role, - })); + const { orgId } = contextSrv.user; + + const options = useMemo( + () => + orgs.map((org) => ({ + label: org.name, + description: org.role, + value: org, + })), + [orgs] + ); + + const selectedValue = useMemo(() => options.find((option) => option.value.orgId === orgId), [options, orgId]); + + const [value, setValue] = useState>(() => selectedValue); const onChange = (option: SelectableValue) => { setValue(option); onSelectChange(option); @@ -28,11 +37,7 @@ export function OrganizationSelect({ orgs, onSelectChange }: OrganizationBasePro value={value} prefix={} className={styles.select} - options={orgs.map((org) => ({ - label: org.name, - description: org.role, - value: org, - }))} + options={options} onChange={onChange} /> );