(fix) Compute content switcher selectedIndex from visible answers (#699)

selectedIndex was computed from the unfiltered answers array but the
rendered Switch children were filtered to exclude hidden answers. When
hidden answers preceded the selected answer, the index would be too
high, causing Carbon to highlight the wrong option. Compute both the
index and the rendered list from the same filtered visibleAnswers array.

Author: denniskigen

src/components/inputs/content-switcher/content-switcher.component.tsx

@@ -21,9 +21,14 @@ const ContentSwitcher: React.FC<FormFieldInputProps> = ({ field, value, errors,
     [setFieldValue],
   );
 
+  const visibleAnswers = useMemo(
+    () => field.questionOptions.answers.filter((answer) => !answer.isHidden),
+    [field.questionOptions.answers],
+  );
+
   const selectedIndex = useMemo(
-    () => field.questionOptions.answers.findIndex((option) => option.concept == value),
-    [value, field.questionOptions.answers],
+    () => visibleAnswers.findIndex((option) => option.concept == value),
+    [value, visibleAnswers],
   );
 
   const isInline = useMemo(() => {
@@ -59,16 +64,14 @@ const ContentSwitcher: React.FC<FormFieldInputProps> = ({ field, value, errors,
           selectedIndex={selectedIndex}
           className={styles.selectedOption}
           size="md">
-          {field.questionOptions.answers
-            .filter((answer) => !answer.isHidden)
-            .map((option, index) => (
-              <Switch
-                name={option.concept || option.value}
-                text={t(option.label)}
-                key={index}
-                disabled={field.isDisabled}
-              />
-            ))}
+          {visibleAnswers.map((option, index) => (
+            <Switch
+              name={option.concept || option.value}
+              text={t(option.label)}
+              key={index}
+              disabled={field.isDisabled}
+            />
+          ))}
         </CdsContentSwitcher>
       </FormGroup>
     )