UHF-9911: React errors resolving

src/js/react/apps/job-search/containers/FormContainer.tsx

@@ -27,7 +27,6 @@ import {
 } from '../store';
 import type OptionType from '../types/OptionType';
 import SelectionsContainer from './SelectionsContainer';
-import { getInitialAreaFilter } from '../helpers/Areas';
 
 const FormContainer = () => {
   const formAction = drupalSettings?.helfi_rekry_job_search?.results_page_path || '';
@@ -177,9 +176,10 @@ const FormContainer = () => {
               value={taskAreaInputValue}
               name={SearchComponents.TASK_AREAS}
               style={{ display: 'none' }}
+              onChange={() => {}}
             >
               {taskAreaInputValue.map((value: string) => (
-                <option aria-hidden key={value} value={value} selected />
+                <option aria-hidden key={value} value={value} />
               ))}
             </select>
             <select
@@ -188,9 +188,10 @@ const FormContainer = () => {
               value={employmentInputValue}
               name={SearchComponents.EMPLOYMENT}
               style={{ display: 'none' }}
+              onChange={() => {}}
             >
               {employmentInputValue.map((value: string) => (
-                <option aria-hidden key={value} value={value} selected />
+                <option aria-hidden key={value} value={value} />
               ))}
             </select>
           </>
@@ -220,23 +221,23 @@ const FormContainer = () => {
             </div>
             <div className='job-search-form__filter job-search-form__dropdown--upper'>
               <Select
-                  clearButtonAriaLabel={Drupal.t('Clear @label selection', {'@label': areaFilterLabel}, { context: 'React search clear selection label' })}
-                  className='job-search-form__dropdown'
-                  clearable
-                  multiselect
-                  selectedItemRemoveButtonAriaLabel={Drupal.t(
-                    'Remove item',
-                    {},
-                    { context: 'Job search remove item aria label' }
-                  )}
-                  placeholder={Drupal.t('All areas', {}, { context: 'Location placeholder' })}
-                  label={areaFilterLabel}
-                  // @ts-ignore
-                  options={areaFilterOptions}
-                  value={areaFilterSelection}
-                  id={SearchComponents.AREA_FILTER}
-                  onChange={setAreaFilter}
-                />
+                clearButtonAriaLabel={Drupal.t('Clear @label selection', {'@label': areaFilterLabel}, { context: 'React search clear selection label' })}
+                className='job-search-form__dropdown'
+                clearable
+                multiselect
+                selectedItemRemoveButtonAriaLabel={Drupal.t(
+                  'Remove item',
+                  {},
+                  { context: 'Job search remove item aria label' }
+                )}
+                placeholder={Drupal.t('All areas', {}, { context: 'Location placeholder' })}
+                label={areaFilterLabel}
+                // @ts-ignore
+                options={areaFilterOptions}
+                value={areaFilterSelection}
+                id={SearchComponents.AREA_FILTER}
+                onChange={setAreaFilter}
+              />
             </div>
           </div>
         </div>

src/js/react/common/helpers/Sentry.ts

@@ -9,7 +9,9 @@ const initSentry = () => {
     dsn: drupalSettings?.helfi_react_search?.sentry_dsn_react,
     // Setting ensures that 100% of transactions will be sent to Sentry, if it's too much it should be lowered.
     tracesSampleRate: 1.0,
-  });
+    // Suppress the ResizeObserver loop limit exceeded error.
+    ignoreErrors: ['ResizeObserver loop limit exceeded']
+});
 };
 
 export default initSentry;

webpack.config.js

@@ -200,7 +200,20 @@ module.exports = (env, argv) => {
       hints: false,
       maxEntrypointSize: 512000,
       maxAssetSize: 512000
-    }
+    },
+    // Suppress the ResizeObserver loop limit exceeded error.
+    devServer: {
+      client: {
+        overlay: {
+          runtimeErrors: (error) => {
+            if (error.message === 'ResizeObserver loop limit exceeded') {
+              return false;
+            }
+            return true;
+          },
+        },
+      },
+    },
   };
 
   if (argv.mode === 'production') {