From 0b4359166b84da241f97e277f4c0a8b32af67e0e Mon Sep 17 00:00:00 2001
From: emeryro <emery.romain@gmail.com>
Date: Wed, 5 Apr 2023 13:24:46 +0200
Subject: [PATCH 1/4] add missing name

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

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..5a044300cc9 100644
--- a/src/implementations/vanilla/components/select/select.js
+++ b/src/implementations/vanilla/components/select/select.js
@@ -266,6 +266,7 @@ export class Select {
     this.input.setAttribute('type', 'text');
     this.input.setAttribute('placeholder', this.textDefault || '');
     this.input.setAttribute('readonly', true);
+    this.input.setAttribute('name', this.element.getAttribute('name') || '');
     if (containerClasses.find((c) => c.includes('disabled'))) {
       this.input.setAttribute('disabled', true);
     }
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: {

From 9ac57d43a99f6bb0c971741c58461a4dda7975c0 Mon Sep 17 00:00:00 2001
From: emeryro <emery.romain@gmail.com>
Date: Tue, 11 Apr 2023 12:00:14 +0200
Subject: [PATCH 2/4] reproduce issue

---
 src/implementations/twig/components/select/select.story.js | 6 +++++-
 src/implementations/vanilla/components/select/select.js    | 5 ++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/implementations/twig/components/select/select.story.js b/src/implementations/twig/components/select/select.story.js
index cf47e4f2762..76ec8cec4c2 100644
--- a/src/implementations/twig/components/select/select.story.js
+++ b/src/implementations/twig/components/select/select.story.js
@@ -56,7 +56,11 @@ Single.args = getArgs(dataSingle);
 Single.argTypes = getArgTypes(dataSingle);
 Single.parameters = { notes: { markdown: notes, json: dataSingle } };
 
-export const Multiple = (args) => selectBox(prepareData(dataMultiple, args));
+export const Multiple = (args) => `
+<form action="http://localhost" method="get">
+  ${selectBox(prepareData(dataMultiple, args))}
+  <input type="submit" />
+</form>`;
 
 Multiple.storyName = 'multiple';
 Multiple.args = getArgs(dataMultiple);
diff --git a/src/implementations/vanilla/components/select/select.js b/src/implementations/vanilla/components/select/select.js
index 5a044300cc9..b890cdfaf29 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) {
@@ -266,7 +266,6 @@ export class Select {
     this.input.setAttribute('type', 'text');
     this.input.setAttribute('placeholder', this.textDefault || '');
     this.input.setAttribute('readonly', true);
-    this.input.setAttribute('name', this.element.getAttribute('name') || '');
     if (containerClasses.find((c) => c.includes('disabled'))) {
       this.input.setAttribute('disabled', true);
     }
@@ -440,7 +439,7 @@ export class Select {
 
     document.addEventListener('click', this.handleClickOutside);
 
-    this.select.parentNode.classList.add('ecl-select__container--hidden');
+    // this.select.parentNode.classList.add('ecl-select__container--hidden');
 
     // Respect default selected options.
     this.updateCurrentValue();

From 49e449272fd0b892699aed0359e942b98d1b23bd Mon Sep 17 00:00:00 2001
From: emeryro <emery.romain@gmail.com>
Date: Thu, 13 Apr 2023 11:37:45 +0200
Subject: [PATCH 3/4] possible fix

---
 .../vanilla/components/select/select.js          | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/implementations/vanilla/components/select/select.js b/src/implementations/vanilla/components/select/select.js
index b890cdfaf29..1dedce64781 100644
--- a/src/implementations/vanilla/components/select/select.js
+++ b/src/implementations/vanilla/components/select/select.js
@@ -439,7 +439,7 @@ export class Select {
 
     document.addEventListener('click', this.handleClickOutside);
 
-    // this.select.parentNode.classList.add('ecl-select__container--hidden');
+    this.select.parentNode.classList.add('ecl-select__container--hidden');
 
     // Respect default selected options.
     this.updateCurrentValue();
@@ -578,11 +578,11 @@ 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.removeAttribute('selected');
           option.selected = false;
           this.selectAll.querySelector('input').checked = false;
         } else {
-          option.setAttribute('selected', 'selected');
+          // option.setAttribute('selected', true);
           option.selected = true;
         }
       }
@@ -615,10 +615,10 @@ export class Select {
 
       if (option) {
         if (checked) {
-          option.setAttribute('selected', 'selected');
+          // option.setAttribute('selected', 'selected');
           option.selected = true;
         } else {
-          option.removeAttribute('selected', 'selected');
+          // option.removeAttribute('selected', 'selected');
           option.selected = false;
         }
       }
@@ -976,7 +976,7 @@ export class Select {
       );
       const input = checkbox.querySelector('.ecl-checkbox__input');
       input.checked = false;
-      option.removeAttribute('selected', 'selected');
+      // option.removeAttribute('selected', 'selected');
       option.selected = false;
     });
 
@@ -997,10 +997,10 @@ export class Select {
         );
         const input = checkbox.querySelector('.ecl-checkbox__input');
         if (input.checked) {
-          option.setAttribute('selected', 'selected');
+          // option.setAttribute('selected', 'selected');
           option.selected = true;
         } else {
-          option.removeAttribute('selected', 'selected');
+          // option.removeAttribute('selected', 'selected');
           option.selected = false;
         }
       });

From df96436b451f9dcab80b39eca8d9de303a42997d Mon Sep 17 00:00:00 2001
From: emeryro <emery.romain@gmail.com>
Date: Thu, 13 Apr 2023 15:08:12 +0200
Subject: [PATCH 4/4] cleanup

---
 src/implementations/twig/components/select/select.story.js | 6 +-----
 src/implementations/vanilla/components/select/select.js    | 7 -------
 2 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/src/implementations/twig/components/select/select.story.js b/src/implementations/twig/components/select/select.story.js
index 76ec8cec4c2..cf47e4f2762 100644
--- a/src/implementations/twig/components/select/select.story.js
+++ b/src/implementations/twig/components/select/select.story.js
@@ -56,11 +56,7 @@ Single.args = getArgs(dataSingle);
 Single.argTypes = getArgTypes(dataSingle);
 Single.parameters = { notes: { markdown: notes, json: dataSingle } };
 
-export const Multiple = (args) => `
-<form action="http://localhost" method="get">
-  ${selectBox(prepareData(dataMultiple, args))}
-  <input type="submit" />
-</form>`;
+export const Multiple = (args) => selectBox(prepareData(dataMultiple, args));
 
 Multiple.storyName = 'multiple';
 Multiple.args = getArgs(dataMultiple);
diff --git a/src/implementations/vanilla/components/select/select.js b/src/implementations/vanilla/components/select/select.js
index 1dedce64781..87c727c21c6 100644
--- a/src/implementations/vanilla/components/select/select.js
+++ b/src/implementations/vanilla/components/select/select.js
@@ -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', true);
           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;
         }
       });