fix(MultiselectDropdown): [BLA-1038] Fix the multi select drop down o…

…ption list prop to adhere to vue js (#516)
otto-de · Dec 4, 2024 · c42a88c · c42a88c
1 parent d360173
commit c42a88c
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 33 deletions.
diff --git a/packages/core-components/src/components.d.ts b/packages/core-components/src/components.d.ts
@@ -683,7 +683,7 @@ export namespace Components {
         /**
           * The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire.
          */
-        "optionsList": string[];
+        "optionsList": string | string[];
         /**
           * The placeholder shown in the input field.
          */
@@ -699,7 +699,7 @@ export namespace Components {
         /**
           * The initial values to be selected in the dropdown.
          */
-        "selectedValues": string[];
+        "selectedValues": string | string[];
     }
     interface B2bMultiselectOption {
         "indeterminate"?: boolean;
@@ -3019,7 +3019,7 @@ declare namespace LocalJSX {
         /**
           * The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire.
          */
-        "optionsList"?: string[];
+        "optionsList"?: string | string[];
         /**
           * The placeholder shown in the input field.
          */
@@ -3035,7 +3035,7 @@ declare namespace LocalJSX {
         /**
           * The initial values to be selected in the dropdown.
          */
-        "selectedValues"?: string[];
+        "selectedValues"?: string | string[];
     }
     interface B2bMultiselectOption {
         "indeterminate"?: boolean;

diff --git a/packages/core-components/src/components/date-picker/date-picker-days.scss b/packages/core-components/src/components/date-picker/date-picker-days.scss
@@ -44,7 +44,6 @@
       color: var(--b2b-color-white-100);
       pointer-events: none;
       width: 100%;
-      height: 100%;
     }
 
     &--focussed {

diff --git a/packages/core-components/src/components/date-picker/date-picker.scss b/packages/core-components/src/components/date-picker/date-picker.scss
@@ -55,7 +55,7 @@
       margin-left: 0;
       padding-left: 0;
       height: 100%;
-      width: 15%;
+      width: 100%;
       color: var(--b2b-color-black-100);
       font-size: var(--b2b-size-35);
       line-height: var(--b2b-size-copy-line-height-100);

diff --git a/packages/core-components/src/components/date-picker/date-picker.tsx b/packages/core-components/src/components/date-picker/date-picker.tsx
@@ -100,6 +100,7 @@ export class B2bDatePicker {
 
   @Listen('b2b-date-picker-previous-month')
   getPreviousMonth() {
+    this.invalid = false;
     if (this.selectedMonth === 0) {
       this.setCurrentMonth(11);
       this.setCurrentYear(this.selectedYear - 1);
@@ -116,7 +117,6 @@ export class B2bDatePicker {
     }
     if (!regex.test(dateString)) {
       this.invalid = true;
-      this.showDatePicker = false;
       this.errorMessage = this.FORMATTING_ERROR_MESSAGE;
       return;
     }
@@ -144,9 +144,15 @@ export class B2bDatePicker {
   private isValidDate(day: number, month: number, year: number): boolean {
     const date = new Date(year, month - 1, day);
 
-    const isValidDay = day > 0 && day <= 31;
-    const isValidMonth = month > 0 && month <= 12;
-    const isValidYear = year > 0;
+    const isValidDay = date.getDate() === day;
+    const isValidMonth = date.getMonth() + 1 === month;
+    const isValidYear =
+      date.getFullYear() === year && year >= 1900 && year <= 2100;
+
+    if (!isValidDay || !isValidMonth || !isValidYear) {
+      this.errorMessage = this.DISABLED_DATE_ERROR_MESSAGE;
+      return false;
+    }
 
     let isValidRange = true;
     if (this.disablePastDates && date < this.todayWithoutTime) {
@@ -161,7 +167,8 @@ export class B2bDatePicker {
       this.errorMessage = this.DISABLED_DATE_ERROR_MESSAGE;
       isValidRange = false;
     }
-    return isValidDay && isValidMonth && isValidYear && isValidRange;
+
+    return isValidRange;
   }
 
   private emitSelectedDate() {
@@ -187,6 +194,9 @@ export class B2bDatePicker {
 
     if (value.length === 10) {
       this.parseDateInput(value);
+      if (this.invalid) {
+        this.showDatePicker = false;
+      }
     }
   };
 
@@ -246,6 +256,7 @@ export class B2bDatePicker {
 
   @Listen('b2b-date-picker-next-month')
   getNextMonth() {
+    this.invalid = false;
     if (this.selectedMonth === 11) {
       this.setCurrentMonth(0);
       this.setCurrentYear(this.selectedYear + 1);
@@ -334,6 +345,13 @@ export class B2bDatePicker {
     }
   }
 
+  private handleFocusOut() {
+    if (this.userInputDate === '' || this.invalid) {
+      return;
+    }
+    this.parseDateInput(this.userInputDate);
+  }
+
   private handleBackdropDismiss = () => {
     this.showDatePicker = false;
   };
@@ -387,6 +405,7 @@ export class B2bDatePicker {
                 onFocus={this.handleInputFocus}
                 onBlur={() => {
                   this.focused = false;
+                  this.handleFocusOut();
                 }}
               />
             </div>

diff --git a/...re-components/src/components/multiselect-dropdown/multiselect-dropdown.docs.mdx b/...re-components/src/components/multiselect-dropdown/multiselect-dropdown.docs.mdx
@@ -37,11 +37,11 @@ The placeholder for the search input. Must be a string.
 
 ### OptionsList
 
-The list of items displayed as options in the multiselect. Must be a list of strings.
+The list of items displayed as options in the multiselect. Must be a list of strings or string in this format '["apple", "banana"]'.
 
 ### SelectedValues
 
-The initial values to be selected in the dropdown. Must be a list of strings.
+The initial values to be selected in the dropdown. Must be a list of strings or a string in this format '["apple", "banana"]'.
 
 ### MaxOptionsVisible
 

diff --git a/packages/core-components/src/components/multiselect-dropdown/multiselect-dropdown.tsx b/packages/core-components/src/components/multiselect-dropdown/multiselect-dropdown.tsx
@@ -25,10 +25,10 @@ export class B2bMultiSelectDropdown {
   @Prop({ reflect: true }) placeholder: string;
 
   /** The initial values to be selected in the dropdown. */
-  @Prop() selectedValues: string[] = [];
+  @Prop() selectedValues: string | string[] = [];
 
   /** The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire. */
-  @Prop() optionsList: string[] = [];
+  @Prop() optionsList: string | string[] = [];
 
   /** The placeholder shown in the search bar. */
   @Prop() searchPlaceholder: string;
@@ -50,8 +50,9 @@ export class B2bMultiSelectDropdown {
   @State() hasOptionList = this.optionsList.length > 0;
 
   componentWillLoad() {
-    this.currentSelectedValues = this.selectedValues.filter(value =>
-      this.optionsList.includes(value),
+    this.parseSelectedValuesAndOptionsList();
+    this.currentSelectedValues = (this.selectedValues as string[]).filter(
+      value => this.optionsList.includes(value),
     );
   }
 
@@ -69,6 +70,19 @@ export class B2bMultiSelectDropdown {
     this.b2bChange.emit(newValues);
   }
 
+  private parseSelectedValuesAndOptionsList() {
+    if (typeof this.selectedValues === 'string') {
+      this.selectedValues = this.parseStringToArray(this.selectedValues);
+    }
+    if (typeof this.optionsList === 'string') {
+      this.optionsList = this.parseStringToArray(this.optionsList);
+    }
+  }
+
+  private parseStringToArray(value: string): string[] {
+    return JSON.parse(value.replace(/'/g, '"'));
+  }
+
   componentDidUpdate() {
     const options = this.getOptions();
     this.updateAllOptions(options);
@@ -78,7 +92,7 @@ export class B2bMultiSelectDropdown {
   private handleInput = event => {
     this.value = event.target.value.toLowerCase();
     if (this.value !== '') {
-      const filteredList = this.optionsList.filter(
+      const filteredList = (this.optionsList as string[]).filter(
         option => option.toLowerCase().indexOf(this.value) > -1,
       );
       this.currentList = filteredList;
@@ -275,7 +289,7 @@ export class B2bMultiSelectDropdown {
                 this.handleSelectAll
               }></b2b-multiselect-option>
             {this.hasOptionList &&
-              this.currentList.map(option => (
+              (this.currentList as string[]).map(option => (
                 <b2b-multiselect-option
                   onB2b-option-selected={this.handleSelectedChange}
                   option={option}></b2b-multiselect-option>

diff --git a/packages/core-components/src/html/form.html b/packages/core-components/src/html/form.html
@@ -33,9 +33,12 @@
           placeholder="Please select..."
           search-placeholder="Search"
           select-all-label="Select All"
-          label="Hylian fruits and vegetables"></b2b-multiselect-dropdown>
+          label="Hylian fruits and vegetables"
+          options-list="['Swift Carrot','Hydromelon','Skyshroom','Fortified Pumpkin','Hyrule Herb','Hylian Shroom','Mighty Banana','Endura Carrot','Golden Apple']"
+          selected-values="['Hydromelon', 'Skyshroom']"></b2b-multiselect-dropdown>
       </div>
     </div>
+
     <div class="content-container">
       <b2b-headline size="200">Input list</b2b-headline>
       <div style="width: 40%">
@@ -60,19 +63,6 @@
             'result4',
             'result4',
           ];
-          const el = document.getElementById('multiselect');
-          el.optionsList = [
-            'Swift Carrot',
-            'Hydromelon',
-            'Skyshroom',
-            'Fortified Pumpkin',
-            'Hyrule Herb',
-            'Hylian Shroom',
-            'Mighty Banana',
-            'Endura Carrot',
-            'Golden Apple',
-          ];
-          el.selectedValues = ['Hydromelon', 'Skyshroom'];
         </script>
       </div>