fix(multi select): fix for safari - FRONT-3910 (#2825)

ec-europa · Apr 13, 2023 · 7a9dd8f · 7a9dd8f · github-actions · Apr 13, 2023
1 parent ae32ad0
commit 7a9dd8f
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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: {