diff --git a/.changeset/fair-walls-talk.md b/.changeset/fair-walls-talk.md
new file mode 100644
index 0000000000..3e3ee26160
--- /dev/null
+++ b/.changeset/fair-walls-talk.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org-react': patch
+---
+
+Bug fixes and adding the possibility to add a default value for the `GroupListPicker`. Fixes: Vertical size jump on text entry, left align for text, selecting a value closes the popup, auto focus on the popup when opening
diff --git a/plugins/org-react/README.md b/plugins/org-react/README.md
index 91c7ebf48a..1f87a5e7e6 100644
--- a/plugins/org-react/README.md
+++ b/plugins/org-react/README.md
@@ -18,13 +18,14 @@ To use the `GroupListPicker` component you'll need to import it and add it to yo
-+
++
```
-The `GroupListPicker` comes with three props:
+The `GroupListPicker` comes with four props:
- `groupTypes`: gives the user the option which group types the component should load. If no value is provided all group types will be loaded in;
- `placeholder`: the placeholder that the select box in the component should display. This might be helpful in informing your users what the functionality of the component is.
- `onChange`: a prop to help the user to give access to the selected group
+- `defaultValue`: gives the user the option to define a default value that will be shown initially before making a selection
diff --git a/plugins/org-react/api-report.md b/plugins/org-react/api-report.md
index 60cd6944d0..48bd090f64 100644
--- a/plugins/org-react/api-report.md
+++ b/plugins/org-react/api-report.md
@@ -12,6 +12,7 @@ export const GroupListPicker: (props: GroupListPickerProps) => JSX.Element;
// @public
export type GroupListPickerProps = {
+ defaultValue?: string;
placeholder?: string;
groupTypes?: Array;
onChange: (value: GroupEntity | undefined) => void;
diff --git a/plugins/org-react/src/components/GroupListPicker/GroupListPicker.tsx b/plugins/org-react/src/components/GroupListPicker/GroupListPicker.tsx
index 1296c520c3..a47c346390 100644
--- a/plugins/org-react/src/components/GroupListPicker/GroupListPicker.tsx
+++ b/plugins/org-react/src/components/GroupListPicker/GroupListPicker.tsx
@@ -34,6 +34,7 @@ import { GroupListPickerButton } from './GroupListPickerButton';
* @public
*/
export type GroupListPickerProps = {
+ defaultValue?: string;
placeholder?: string;
groupTypes?: Array;
onChange: (value: GroupEntity | undefined) => void;
@@ -43,9 +44,9 @@ export type GroupListPickerProps = {
export const GroupListPicker = (props: GroupListPickerProps) => {
const catalogApi = useApi(catalogApiRef);
- const { onChange, groupTypes, placeholder = '' } = props;
+ const { onChange, groupTypes, placeholder = '', defaultValue = '' } = props;
const [anchorEl, setAnchorEl] = React.useState(null);
- const [inputValue, setInputValue] = React.useState('');
+ const [inputValue, setInputValue] = React.useState(defaultValue);
const handleClick = (event: React.MouseEvent) => {
setAnchorEl(event.currentTarget);
@@ -75,6 +76,7 @@ export const GroupListPicker = (props: GroupListPickerProps) => {
const handleChange = useCallback(
(_, v: GroupEntity | null) => {
onChange(v ?? undefined);
+ setAnchorEl(null);
},
[onChange],
);
@@ -108,6 +110,8 @@ export const GroupListPicker = (props: GroupListPickerProps) => {
renderInput={params => (
diff --git a/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx b/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx
index 149bf778b1..01ffe7e58b 100644
--- a/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx
+++ b/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx
@@ -22,8 +22,7 @@ import PeopleIcon from '@material-ui/icons/People';
const useStyles = makeStyles((theme: BackstageTheme) => ({
btn: {
- margin: 0,
- padding: 10,
+ padding: '10px',
width: '100%',
cursor: 'pointer',
justifyContent: 'space-between',
@@ -32,10 +31,13 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
fontSize: '1.5rem',
fontStyle: 'normal',
fontWeight: theme.typography.fontWeightBold,
+ height: '32px',
letterSpacing: '-0.25px',
- lineHeight: '32px',
marginBottom: 0,
+ marginLeft: '4px',
+ textAlign: 'left',
textTransform: 'none',
+ width: '100%',
},
icon: {
transform: 'scale(1.5)',