From 12242073042258ce680a8762ea7c8c0042cc3242 Mon Sep 17 00:00:00 2001
From: Skaiir <serval.core@gmail.com>
Date: Thu, 12 Sep 2024 13:29:00 +0200
Subject: [PATCH] chore: cleanup option named o and option keys

Related to #3688
---
 .../src/render/components/form-fields/Checklist.js | 10 +++++-----
 .../src/render/components/form-fields/Radio.js     |  2 +-
 .../src/render/components/form-fields/Taglist.js   |  4 ++--
 .../form-fields/parts/SearchableSelect.js          | 14 ++++++++------
 .../components/form-fields/parts/SimpleSelect.js   | 12 ++++++------
 5 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/packages/form-js-viewer/src/render/components/form-fields/Checklist.js b/packages/form-js-viewer/src/render/components/form-fields/Checklist.js
index 79b8b4eb7..ca07b5933 100644
--- a/packages/form-js-viewer/src/render/components/form-fields/Checklist.js
+++ b/packages/form-js-viewer/src/render/components/form-fields/Checklist.js
@@ -68,12 +68,12 @@ export function Checklist(props) {
     <div class={classNames(formFieldClasses(type, { errors, disabled, readonly }))} ref={outerDivRef}>
       <Label label={label} required={required} />
       {loadState == LOAD_STATES.LOADED &&
-        options.map((o, index) => {
+        options.map((option, index) => {
           const itemDomId = `${domId}-${index}`;
-          const isChecked = hasEqualValue(o.value, values);
+          const isChecked = hasEqualValue(option.value, values);
 
           return (
-            <div className="fjs-inline-label" key={index}>
+            <div className="fjs-inline-label" key={option.value}>
               <input
                 checked={isChecked}
                 class="fjs-input"
@@ -81,7 +81,7 @@ export function Checklist(props) {
                 readOnly={readonly}
                 id={itemDomId}
                 type="checkbox"
-                onClick={() => toggleCheckbox(o.value)}
+                onClick={() => toggleCheckbox(option.value)}
                 onBlur={onCheckboxBlur}
                 onFocus={onCheckboxFocus}
                 required={required}
@@ -90,7 +90,7 @@ export function Checklist(props) {
               />
               <Label
                 htmlFor={itemDomId}
-                label={o.label}
+                label={option.label}
                 class={classNames({
                   'fjs-checked': isChecked,
                 })}
diff --git a/packages/form-js-viewer/src/render/components/form-fields/Radio.js b/packages/form-js-viewer/src/render/components/form-fields/Radio.js
index 82246ab3a..e3161151b 100644
--- a/packages/form-js-viewer/src/render/components/form-fields/Radio.js
+++ b/packages/form-js-viewer/src/render/components/form-fields/Radio.js
@@ -69,7 +69,7 @@ export function Radio(props) {
           const isChecked = isEqual(option.value, value);
 
           return (
-            <div className="fjs-inline-label" key={index}>
+            <div className="fjs-inline-label" key={option.value}>
               <input
                 checked={isChecked}
                 class="fjs-input"
diff --git a/packages/form-js-viewer/src/render/components/form-fields/Taglist.js b/packages/form-js-viewer/src/render/components/form-fields/Taglist.js
index e35907d64..f88e85e74 100644
--- a/packages/form-js-viewer/src/render/components/form-fields/Taglist.js
+++ b/packages/form-js-viewer/src/render/components/form-fields/Taglist.js
@@ -225,8 +225,8 @@ export function Taglist(props) {
         {shouldDisplayDropdown && (
           <DropdownList
             values={filteredOptions}
-            getLabel={(o) => o.label}
-            onValueSelected={(o) => selectValue(o.value)}
+            getLabel={(option) => option.label}
+            onValueSelected={(option) => selectValue(option.value)}
             emptyListMessage={hasOptionsLeft ? 'No results' : 'All values selected'}
             listenerElement={inputRef.current}
           />
diff --git a/packages/form-js-viewer/src/render/components/form-fields/parts/SearchableSelect.js b/packages/form-js-viewer/src/render/components/form-fields/parts/SearchableSelect.js
index 660304897..450136c6e 100644
--- a/packages/form-js-viewer/src/render/components/form-fields/parts/SearchableSelect.js
+++ b/packages/form-js-viewer/src/render/components/form-fields/parts/SearchableSelect.js
@@ -48,10 +48,12 @@ export function SearchableSelect(props) {
       return options;
     }
 
-    return options.filter((o) => o.label && o.value && o.label.toLowerCase().includes(filter.toLowerCase()));
+    return options.filter(
+      (option) => option.label && option.value && option.label.toLowerCase().includes(filter.toLowerCase()),
+    );
   }, [filter, loadState, options, isFilterActive]);
 
-  const setValue = useCallback(
+  const pickOption = useCallback(
     (option) => {
       setFilter((option && option.label) || '');
       props.onChange({ value: (option && option.value) || null });
@@ -159,7 +161,7 @@ export function SearchableSelect(props) {
           <span
             class="fjs-select-cross"
             onMouseDown={(e) => {
-              setValue(null);
+              pickOption(null);
               e.preventDefault();
             }}>
             <XMarkIcon />{' '}
@@ -173,9 +175,9 @@ export function SearchableSelect(props) {
         {displayState.displayDropdown && (
           <DropdownList
             values={filteredOptions}
-            getLabel={(o) => o.label}
-            onValueSelected={(o) => {
-              setValue(o);
+            getLabel={(option) => option.label}
+            onValueSelected={(option) => {
+              pickOption(option);
               setIsDropdownExpanded(false);
             }}
             listenerElement={searchbarRef.current}
diff --git a/packages/form-js-viewer/src/render/components/form-fields/parts/SimpleSelect.js b/packages/form-js-viewer/src/render/components/form-fields/parts/SimpleSelect.js
index 53c7c5709..292edaced 100644
--- a/packages/form-js-viewer/src/render/components/form-fields/parts/SimpleSelect.js
+++ b/packages/form-js-viewer/src/render/components/form-fields/parts/SimpleSelect.js
@@ -31,7 +31,7 @@ export function SimpleSelect(props) {
 
   const valueLabel = useMemo(() => value && getLabelCorrelation(value), [value, getLabelCorrelation]);
 
-  const setValue = useCallback(
+  const pickOption = useCallback(
     (option) => {
       props.onChange({ value: (option && option.value) || null });
     },
@@ -68,7 +68,7 @@ export function SimpleSelect(props) {
   );
 
   const initialFocusIndex = useMemo(
-    () => (value && findIndex(options, (o) => o.value === value)) || 0,
+    () => (value && findIndex(options, (option) => option.value === value)) || 0,
     [options, value],
   );
 
@@ -112,7 +112,7 @@ export function SimpleSelect(props) {
           <span
             class="fjs-select-cross"
             onMouseDown={(e) => {
-              setValue(null);
+              pickOption(null);
               e.stopPropagation();
             }}>
             <XMarkIcon />
@@ -124,10 +124,10 @@ export function SimpleSelect(props) {
         {displayState.displayDropdown && (
           <DropdownList
             values={options}
-            getLabel={(o) => o.label}
+            getLabel={(option) => option.label}
             initialFocusIndex={initialFocusIndex}
-            onValueSelected={(o) => {
-              setValue(o);
+            onValueSelected={(option) => {
+              pickOption(option);
               setIsDropdownExpanded(false);
             }}
             listenerElement={selectRef.current}