diff --git a/.changeset/nasty-pens-march.md b/.changeset/nasty-pens-march.md
new file mode 100644
index 0000000000..feee28fad4
--- /dev/null
+++ b/.changeset/nasty-pens-march.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org-react': patch
+---
+
+Bug fixes and adding the possibility to add a default value. Fixes: Vertical size jump on text entry, left align for text, selecting a value closes the popup, autofocus 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/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..3f9528b9bd 100644
--- a/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx
+++ b/plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx
@@ -27,13 +27,18 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
width: '100%',
cursor: 'pointer',
justifyContent: 'space-between',
+ '& p': {
+ width: '100%',
+ textAlign: 'left',
+ marginLeft: 4,
+ },
},
title: {
fontSize: '1.5rem',
fontStyle: 'normal',
fontWeight: theme.typography.fontWeightBold,
letterSpacing: '-0.25px',
- lineHeight: '32px',
+ height: '32px',
marginBottom: 0,
textTransform: 'none',
},