From 7a9dd8fe37dbdf41ca35fd45ce1d0f3b02f974cc Mon Sep 17 00:00:00 2001
From: Romain Emery <emery.romain@gmail.com>
Date: Thu, 13 Apr 2023 15:40:16 +0200
Subject: [PATCH] fix(multi select): fix for safari - FRONT-3910 (#2825)

---
 .../components/select/__snapshots__/select.test.js.snap  | 7 +++++++
 src/implementations/vanilla/components/select/select.js  | 9 +--------
 src/specs/components/select/demo/data-multiple.js        | 1 +
 src/specs/components/select/demo/data-single.js          | 1 +
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/implementations/twig/components/select/__snapshots__/select.test.js.snap b/src/implementations/twig/components/select/__snapshots__/select.test.js.snap
index 79f89ffa37a..33f7c529e22 100644
--- a/src/implementations/twig/components/select/__snapshots__/select.test.js.snap
+++ b/src/implementations/twig/components/select/__snapshots__/select.test.js.snap
@@ -27,6 +27,7 @@ exports[`Select Default renders correctly 1`] = `
       <select
         class="ecl-select"
         id="select-default"
+        name="country"
       >
         <optgroup
           label="European countries"
@@ -146,6 +147,7 @@ exports[`Select Default renders correctly with extra attributes 1`] = `
         data-test="data-test-value"
         data-test-1="data-test-value-1"
         id="select-default"
+        name="country"
         required=""
       >
         <optgroup
@@ -264,6 +266,7 @@ exports[`Select Default renders correctly with extra class names 1`] = `
       <select
         class="ecl-select custom-class custom-class--test"
         id="select-default"
+        name="country"
         required=""
       >
         <optgroup
@@ -383,6 +386,7 @@ exports[`Select Disabled renders correctly 1`] = `
         class="ecl-select"
         disabled=""
         id="select-default"
+        name="country"
       >
         <optgroup
           label="European countries"
@@ -509,6 +513,7 @@ exports[`Select Multiple renders correctly 1`] = `
         data-ecl-select-search="Enter keyword"
         id="select-multiple"
         multiple=""
+        name="country"
         required=""
       >
         <optgroup
@@ -626,6 +631,7 @@ exports[`Select Required renders correctly 1`] = `
       <select
         class="ecl-select"
         id="select-default"
+        name="country"
         required=""
       >
         <optgroup
@@ -758,6 +764,7 @@ exports[`Select With error renders correctly 1`] = `
       <select
         class="ecl-select"
         id="select-default"
+        name="country"
       >
         <optgroup
           label="European countries"
diff --git a/src/implementations/vanilla/components/select/select.js b/src/implementations/vanilla/components/select/select.js
index 380cb662128..87c727c21c6 100644
--- a/src/implementations/vanilla/components/select/select.js
+++ b/src/implementations/vanilla/components/select/select.js
@@ -220,7 +220,7 @@ export class Select {
   }
 
   /**
-   * Manually checks an ECL-specific checkbox when previously defualt has been prevented.
+   * Manually checks an ECL-specific checkbox when previously default has been prevented.
    * @param {Event} e
    */
   static checkCheckbox(e) {
@@ -578,11 +578,9 @@ export class Select {
     Array.from(this.select.options).forEach((option) => {
       if (option.text === checkbox.getAttribute('data-select-multiple-value')) {
         if (option.getAttribute('selected') || option.selected) {
-          option.removeAttribute('selected');
           option.selected = false;
           this.selectAll.querySelector('input').checked = false;
         } else {
-          option.setAttribute('selected', 'selected');
           option.selected = true;
         }
       }
@@ -615,10 +613,8 @@ export class Select {
 
       if (option) {
         if (checked) {
-          option.setAttribute('selected', 'selected');
           option.selected = true;
         } else {
-          option.removeAttribute('selected', 'selected');
           option.selected = false;
         }
       }
@@ -976,7 +972,6 @@ export class Select {
       );
       const input = checkbox.querySelector('.ecl-checkbox__input');
       input.checked = false;
-      option.removeAttribute('selected', 'selected');
       option.selected = false;
     });
 
@@ -997,10 +992,8 @@ export class Select {
         );
         const input = checkbox.querySelector('.ecl-checkbox__input');
         if (input.checked) {
-          option.setAttribute('selected', 'selected');
           option.selected = true;
         } else {
-          option.removeAttribute('selected', 'selected');
           option.selected = false;
         }
       });
diff --git a/src/specs/components/select/demo/data-multiple.js b/src/specs/components/select/demo/data-multiple.js
index 1651f53da01..7b4ec03994c 100644
--- a/src/specs/components/select/demo/data-multiple.js
+++ b/src/specs/components/select/demo/data-multiple.js
@@ -1,6 +1,7 @@
 module.exports = {
   id: 'select-multiple',
   label: 'Select a country',
+  name: 'country',
   helper_text: 'This is the helper text.',
   invalid_text: 'Error message',
   invalid_icon: {
diff --git a/src/specs/components/select/demo/data-single.js b/src/specs/components/select/demo/data-single.js
index aa858258832..96449b631af 100644
--- a/src/specs/components/select/demo/data-single.js
+++ b/src/specs/components/select/demo/data-single.js
@@ -1,6 +1,7 @@
 module.exports = {
   id: 'select-default',
   label: 'Select a country',
+  name: 'country',
   helper_text: "This is the input's helper text.",
   invalid_text: 'This is the error message',
   invalid_icon: {