♻️(react) improve select element keys

It was considered as a bad practice to include array indexes in list
elements keys even though it was made this way in the documentation. We
removed them and also decided to drop the use of options value in the
keys too to the profit of optionToValue which can never be undefined or null.
This changes caused test crashing due to the fact that it made the useSelect
onStateChange trigger a onBlur event that was causing the first option of the
list to be selected automatically, which was a really weird behavior. Before
it was not happening because newSelectedItem was not defined, using the
new keys made it defined, we don't 100% understand why yet.

packages/react/src/components/Forms/Select/mono-common.tsx

@@ -175,7 +175,7 @@ export const SelectMonoAux = ({
                           downshiftReturn.selectedItem === item,
                         "c__select__menu__item--disabled": item.disabled,
                       })}
-                      key={`${item.value}${index.toString()}`}
+                      key={`${optionToValue(item)}${index.toString()}`}
                       {...downshiftReturn.getItemProps({
                         item,
                         index,

packages/react/src/components/Forms/Select/multi-common.tsx

@@ -1,7 +1,6 @@
 import React, { HTMLAttributes } from "react";
 import { useMultipleSelection } from "downshift";
 import classNames from "classnames";
-
 import { Field } from ":/components/Forms/Field";
 import { LabelledBox } from ":/components/Forms/LabelledBox";
 import { Button } from ":/components/Button";
@@ -96,7 +95,7 @@ export const SelectMultiAux = ({
         >
           {selectedItems.map((selectedItem, index) => (
             <input
-              key={`${selectedItem.value}${index}`}
+              key={`${optionToValue(selectedItem)}${index.toString()}`}
               type="hidden"
               name={name}
               value={optionToValue(selectedItem)}
@@ -152,7 +151,9 @@ export const SelectMultiAux = ({
                   return (
                     <div
                       className="c__select__inner__value__pill"
-                      key={`${selectedItemForRender.value}${index}`}
+                      key={`${optionToValue(
+                        selectedItemForRender,
+                      )}${index.toString()}`}
                       {...useMultipleSelectionReturn.getSelectedItemProps({
                         selectedItem: selectedItemForRender,
                         index,
@@ -201,7 +202,7 @@ export const SelectMultiAux = ({
                         "c__select__menu__item--highlight": isActive,
                         "c__select__menu__item--disabled": option.disabled,
                       })}
-                      key={`${option.value}${index.toString()}`}
+                      key={`${optionToValue(option)}${index.toString()}`}
                       {...downshiftReturn.getItemProps({
                         item: option,
                         index,

packages/react/src/components/Forms/Select/multi-simple.tsx

@@ -52,7 +52,6 @@ export const SelectMultiSimple = (props: SubProps) => {
         case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
         case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
         case useSelect.stateChangeTypes.ItemClick:
-        case useSelect.stateChangeTypes.ToggleButtonBlur:
           if (newSelectedItem) {
             props.onSelectedItemsChange([
               ...props.selectedItems,