fix: Upgrade usage of React-Select to support 5.x version

https://github.com/JedWatson/react-select/releases/tag/react-select%405.0.0
ExpediaGroup · Jun 24, 2022 · 3dd1481 · 3dd1481
1 parent 2983240
commit 3dd1481
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 16 deletions.
diff --git a/...activity-page/components/activity-filter-sidebar/components/filter-stack/filter-stack.tsx b/...activity-page/components/activity-filter-sidebar/components/filter-stack/filter-stack.tsx
@@ -93,12 +93,15 @@ export const FilterStack = ({
       {!showAllFilters && (
         <CreatableSelect
           name="tags"
-          value=""
+          value={null}
           options={selectOptions}
-          onChange={(e) => addFilter(filterKey, e.value)}
+          onChange={(e) => {
+            if (e) {
+              addFilter(filterKey, e.value);
+            }
+          }}
           placeholder={`Select ${filterKey}...`}
           aria-label={`Select ${filterKey}...`}
-          formatCreateLabel={(input) => getLabel(input)}
         />
       )}
     </SidebarStack>

diff --git a/...d/src/pages/insight-editor/components/insight-metadata-editor/insight-metadata-editor.tsx b/...d/src/pages/insight-editor/components/insight-metadata-editor/insight-metadata-editor.tsx
@@ -137,7 +137,9 @@ export const InsightMetadataEditor = ({ insight, isNewInsight, form, templates,
                 inputId="insight-item-type"
                 options={itemTypeOptions}
                 onChange={(e) => {
-                  onChange(e.value);
+                  if (e) {
+                    onChange(e.value);
+                  }
                 }}
                 value={itemTypeOptions && value && itemTypeOptions.find((type) => type.name === value)}
                 styles={{

diff --git a/...ges/frontend/src/pages/insight-editor/components/insight-metadata-editor/insight-team.tsx b/...ges/frontend/src/pages/insight-editor/components/insight-metadata-editor/insight-team.tsx
@@ -69,7 +69,11 @@ export const InsightTeam = ({ insight, form }) => {
             <CreatableSelect
               inputId="team"
               options={availableTeams}
-              onChange={(e) => onChange(e.value)}
+              onChange={(e) => {
+                if (e) {
+                  onChange(e.value);
+                }
+              }}
               value={{ value, label: value }}
               styles={{
                 menu: (base) => ({ ...base, zIndex: 11 }),

diff --git a/.../src/pages/search-page/components/filter-sidebar/components/filter-stack/filter-stack.tsx b/.../src/pages/search-page/components/filter-sidebar/components/filter-stack/filter-stack.tsx
@@ -93,12 +93,15 @@ export const FilterStack = ({
       {!showAllFilters && (
         <CreatableSelect
           name="tags"
-          value=""
+          value={null}
           options={selectOptions}
-          onChange={(e) => addFilter(filterKey, e.value)}
+          onChange={(e) => {
+            if (e) {
+              addFilter(filterKey, e.value);
+            }
+          }}
           placeholder={`Select ${filterKey}...`}
           aria-label={`Select ${filterKey}...`}
-          formatCreateLabel={(input) => getLabel(input)}
         />
       )}
     </SidebarStack>

diff --git a/packages/frontend/src/pages/settings-page/components/insights-settings/insights-settings.tsx b/packages/frontend/src/pages/settings-page/components/insights-settings/insights-settings.tsx
@@ -80,10 +80,10 @@ export const InsightsSettings = ({ user, onSubmit, isSubmitting }: Props) => {
             render={({ field: { onChange, value } }) => (
               <Select
                 inputId="defaultTemplateId"
-                defaultValue={templateOptions.find((t) => t.value === defaultTemplateId)}
+                defaultValue={templateOptions.find((t) => t.value === defaultTemplateId) ?? { value: '' }}
                 options={templateOptions}
-                onChange={(e) => (e === null ? onChange('') : onChange(e.value))}
-                value={templateOptions && value && templateOptions.find((t) => t.value === value)}
+                onChange={(e) => (e == null || e == '' ? onChange('') : onChange(e.value))}
+                value={(templateOptions && value && templateOptions.find((t) => t.value === value)) ?? { value: '' }}
                 isClearable={true}
                 styles={{
                   menu: (base) => ({ ...base, zIndex: 11 }),

diff --git a/packages/frontend/src/pages/settings-page/components/profile-settings/profile-settings.tsx b/packages/frontend/src/pages/settings-page/components/profile-settings/profile-settings.tsx
@@ -269,7 +269,11 @@ export const ProfileSettings = ({ user, onSubmit, isSubmitting }: Props) => {
                     <CreatableSelect
                       inputId="team"
                       options={availableTeams}
-                      onChange={(e) => onChange(e.value)}
+                      onChange={(e) => {
+                        if (e) {
+                          onChange(e.value);
+                        }
+                      }}
                       value={{ value, label: value }}
                       styles={{
                         menu: (base) => ({ ...base, zIndex: 11 }),
@@ -336,10 +340,10 @@ export const ProfileSettings = ({ user, onSubmit, isSubmitting }: Props) => {
                       isMulti
                       isClearable
                       options={availableSkills}
-                      onChange={(event: { value: string }[]) => {
+                      onChange={(e) => {
                         let skills: string[] = [];
-                        if (event != null) {
-                          skills = event.map((e) => e.value.trim().toLowerCase().replace(/\s/g, '-'));
+                        if (e != null) {
+                          skills = e.map((v) => v.value.trim().toLowerCase().replace(/\s/g, '-'));
                         }
                         setValue('skills', skills);
                       }}

diff --git a/packages/frontend/src/pages/settings-page/components/system-settings/system-settings.tsx b/packages/frontend/src/pages/settings-page/components/system-settings/system-settings.tsx
@@ -69,7 +69,11 @@ export const SystemSettings = ({ user, onSubmit, isSubmitting }: Props) => {
                     inputId="locale"
                     defaultValue={{ value: detectedLocale, label: `Detected (${detectedLocale})` }}
                     options={localeOptions}
-                    onChange={(e) => onChange(e.value)}
+                    onChange={(e) => {
+                      if (e) {
+                        onChange(e.value);
+                      }
+                    }}
                     value={localeOptions && value && localeOptions.find((l) => l.value === value)}
                     placeholder={`Detected (${detectedLocale})`}
                     styles={{