From 111bb677c48e0335dd056b1b6e84a1a83f3e2ac9 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Wed, 13 Sep 2023 17:21:07 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(react)=20improve=20select=20?=
 =?UTF-8?q?element=20keys?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../react/src/components/Forms/Select/mono-common.tsx    | 2 +-
 .../react/src/components/Forms/Select/multi-common.tsx   | 9 +++++----
 .../react/src/components/Forms/Select/multi-simple.tsx   | 1 -
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/components/Forms/Select/mono-common.tsx b/packages/react/src/components/Forms/Select/mono-common.tsx
index f15bf9b..3e640ba 100644
--- a/packages/react/src/components/Forms/Select/mono-common.tsx
+++ b/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,
diff --git a/packages/react/src/components/Forms/Select/multi-common.tsx b/packages/react/src/components/Forms/Select/multi-common.tsx
index f57c44d..d23d4bf 100644
--- a/packages/react/src/components/Forms/Select/multi-common.tsx
+++ b/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,
diff --git a/packages/react/src/components/Forms/Select/multi-simple.tsx b/packages/react/src/components/Forms/Select/multi-simple.tsx
index 4b692f3..9712da0 100644
--- a/packages/react/src/components/Forms/Select/multi-simple.tsx
+++ b/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,