fixed react select props

packages/core/helper-plugin/lib/src/components/ReactSelect/ReactSelect.js

@@ -9,7 +9,7 @@ import IndicatorSeparator from './components/IndicatorSeparator';
 
 import getSelectStyles from './utils/getSelectStyles';
 
-const ReactSelect = ({ components, styles, error, ...props }) => {
+const ReactSelect = ({ components, styles, error, ariaErrorMessage, ...props }) => {
   const theme = useTheme();
   const customStyles = getSelectStyles(theme, error);
 
@@ -17,7 +17,7 @@ const ReactSelect = ({ components, styles, error, ...props }) => {
     <Select
       {...props}
       components={{ ClearIndicator, DropdownIndicator, IndicatorSeparator, ...components }}
-      aria-errormessage={error && 'folder-parent-error'}
+      aria-errormessage={error && ariaErrorMessage}
       aria-invalid={!!error}
       styles={{ ...customStyles, ...styles }}
     />
@@ -27,12 +27,14 @@ const ReactSelect = ({ components, styles, error, ...props }) => {
 export default ReactSelect;
 
 ReactSelect.defaultProps = {
+  ariaErrorMessage: undefined,
   components: undefined,
   error: undefined,
   styles: undefined,
 };
 
 ReactSelect.propTypes = {
+  ariaErrorMessage: PropTypes.string,
   components: PropTypes.object,
   error: PropTypes.string,
   styles: PropTypes.object,

packages/core/upload/admin/src/components/EditFolderDialog/EditFolderDialog.js

@@ -207,6 +207,7 @@ export const EditFolderDialog = ({ onClose, folder, parentFolderId }) => {
                         inputId="folder-parent"
                         disabled={formDisabled}
                         error={errors?.parent}
+                        ariaErrorMessage="folder-parent-error"
                       />
 
                       {errors.parent && (

packages/core/upload/admin/src/components/SelectTree/SelectTree.js

@@ -12,13 +12,7 @@ const hasParent = option => !option.parent;
 const hasParentOrMatchesValue = (option, value) =>
   option.value === value || option.parent === value;
 
-const SelectTree = ({
-  options: defaultOptions,
-  maxDisplayDepth,
-  defaultValue,
-  error,
-  ...props
-}) => {
+const SelectTree = ({ options: defaultOptions, maxDisplayDepth, defaultValue, ...props }) => {
   const flatDefaultOptions = useMemo(() => flattenTree(defaultOptions), [defaultOptions]);
   const optionsFiltered = useMemo(() => flatDefaultOptions.filter(hasParent), [flatDefaultOptions]);
   const [options, setOptions] = useState(optionsFiltered);
@@ -51,7 +45,6 @@ const SelectTree = ({
       components={{ Option }}
       options={options}
       defaultValue={defaultValue}
-      error={error}
       /* -- custom props, used by the Option component */
       maxDisplayDepth={maxDisplayDepth}
       openValues={openValues}
@@ -76,7 +69,6 @@ OptionShape.defaultProps = {
 
 SelectTree.defaultProps = {
   defaultValue: undefined,
-  error: undefined,
   maxDisplayDepth: 5,
 };
 
@@ -84,7 +76,6 @@ SelectTree.propTypes = {
   defaultValue: PropTypes.shape({
     value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   }),
-  error: PropTypes.string,
   maxDisplayDepth: PropTypes.number,
   options: PropTypes.arrayOf(OptionShape).isRequired,
 };