(bug) OIDC scopes are not shown in the configuration form select

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## next deploy
 
 - Fix a bug: Gender, Address and Birthday are not mapped properly from SSO (#365)
+- Fix a bug: OIDC scopes are not shown in the configuration form select
 
 ## v5.4.10 2022 July 05
 

app/frontend/src/javascript/components/authentication-provider/openid-connect-form.tsx

@@ -29,6 +29,8 @@ export const OpenidConnectForm = <TFieldValues extends FieldValues, TContext ext
   // saves the state of the discovery endpoint
   const [discoveryAvailable, setDiscoveryAvailable] = useState<boolean>(false);
   const [scopesAvailable, setScopesAvailable] = useState<string[]>(null);
+  // this is a workaround for https://github.com/JedWatson/react-select/issues/1879
+  const [selectKey, setSelectKey] = useState<number>(0);
 
   // when we have detected a discovery endpoint, we mark it as available
   useEffect(() => {
@@ -38,6 +40,11 @@ export const OpenidConnectForm = <TFieldValues extends FieldValues, TContext ext
     );
   }, [discoveryAvailable]);
 
+  // this will force the scope "select" to re-fetch the options
+  useEffect(() => {
+    setSelectKey(selectKey + 1);
+  }, [scopesAvailable]);
+
   // when the component is mounted, we try to discover the discovery endpoint for the current configuration (if any)
   useEffect(() => {
     checkForDiscoveryEndpoint({ target: { value: currentFormValues?.issuer } } as React.ChangeEvent<HTMLInputElement>);
@@ -125,6 +132,7 @@ export const OpenidConnectForm = <TFieldValues extends FieldValues, TContext ext
                        label={t('app.admin.authentication.openid_connect_form.scope')}
                        tooltip={<HtmlTranslate trKey="app.admin.authentication.openid_connect_form.scope_help_html" />}
                        loadOptions={loadScopes}
+                       selectKey={selectKey.toString()}
                        creatable
                        control={control} />
       <FormSelect id="providable_attributes.prompt"

app/frontend/src/javascript/components/form/form-multi-select.tsx

@@ -16,6 +16,7 @@ interface CommonProps<TFieldValues, TContext extends object, TOptionValue> exten
   onChange?: (values: Array<TOptionValue>) => void,
   placeholder?: string,
   creatable?: boolean,
+  selectKey?: string,
 }
 
 // we should provide either an array of options or a function that returns a promise, but not both
@@ -35,7 +36,7 @@ type selectOption<TOptionValue> = { value: TOptionValue, label: string, select?:
  * This component is a wrapper around react-select to use with react-hook-form.
  * It is a multi-select component.
  */
-export const FormMultiSelect = <TFieldValues extends FieldValues, TContext extends object, TOptionValue>({ id, label, tooltip, className, control, placeholder, options, valuesDefault, error, rules, disabled, onChange, formState, warning, loadOptions, creatable }: FormSelectProps<TFieldValues, TContext, TOptionValue>) => {
+export const FormMultiSelect = <TFieldValues extends FieldValues, TContext extends object, TOptionValue>({ id, label, tooltip, className, control, placeholder, options, valuesDefault, error, rules, disabled, onChange, formState, warning, loadOptions, creatable, selectKey }: FormSelectProps<TFieldValues, TContext, TOptionValue>) => {
   const { t } = useTranslation('shared');
 
   const [isDisabled, setIsDisabled] = React.useState<boolean>(false);
@@ -52,7 +53,7 @@ export const FormMultiSelect = <TFieldValues extends FieldValues, TContext exten
   useEffect(() => {
     if (typeof loadOptions === 'function') {
       loadOptions('', options => {
-        setAllOptions(options);
+        setTimeout(() => setAllOptions(options), 1);
       });
     }
   }, [loadOptions]);
@@ -73,7 +74,7 @@ export const FormMultiSelect = <TFieldValues extends FieldValues, TContext exten
    * This function will return the currently selected options, according to the selectedOptions state.
    */
   const getCurrentValues = (value: Array<TOptionValue>): Array<selectOption<TOptionValue>> => {
-    return allOptions.filter(c => value?.includes(c.value));
+    return allOptions?.filter(c => value?.includes(c.value));
   };
 
   /**
@@ -119,6 +120,7 @@ export const FormMultiSelect = <TFieldValues extends FieldValues, TContext exten
                       classNamePrefix: 'rs',
                       className: 'rs',
                       ref,
+                      key: selectKey,
                       value: getCurrentValues(value),
                       placeholder,
                       isDisabled,