chore: Bug fixes and adding the possibility to add a default value

Signed-off-by: Mathias Bronner <mathiasb@spotify.com>
Signed-off-by: Mathias Bronner <mathiasbronner@gmail.com>

.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

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
 
  <Grid container spacing={3}>
     <Grid item xs={12}>
-+     <GroupListPicker groupTypes={['team']} placeholder='Search for a team' onChange={setGroup}/>
++     <GroupListPicker groupTypes={['team']} placeholder='Search for a team' onChange={setGroup} defaultValue='Team A'/>
     </Grid>
  </Grid>
 ```
 
-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

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<string>;
   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<HTMLElement | null>(null);
-  const [inputValue, setInputValue] = React.useState('');
+  const [inputValue, setInputValue] = React.useState(defaultValue);
 
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     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 => (
             <TextField
               {...params}
+              // eslint-disable-next-line jsx-a11y/no-autofocus
+              autoFocus
               placeholder={placeholder}
               variant="outlined"
             />

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',
   },