feat(Datepicker: [BLA-996] Should not remove selected date when enter…

… is pressed * docs(DatePicker): [BLA-996] Rename the DatePicker to Date Picker * docs(DatePicker): [BLA-996] Remove pre selected date control from storybook * feat(DatePicker): [BLA-996] Should not remove selected date when enter is pressed
otto-de · Oct 23, 2024 · 8e5360b · 8e5360b
1 parent 24b0344
commit 8e5360b
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 46 deletions.
diff --git a/packages/core-components/src/components/date-picker/date-picker.stories.tsx b/packages/core-components/src/components/date-picker/date-picker.stories.tsx
@@ -4,7 +4,7 @@ import { getArgTypes } from '../../docs/config/utils';
 import { userEvent } from '@storybook/testing-library';
 
 const meta: Meta = {
-  title: 'Components/Form/DatePicker',
+  title: 'Components/Form/Date Picker',
   component: 'b2b-date-picker',
   args: {
     disablePastDates: false,
@@ -13,28 +13,29 @@ const meta: Meta = {
     label: 'Zeitraum auswählen',
     preSelectedDate: '',
   },
-  argTypes: getArgTypes('b2b-date-picker'),
+  argTypes: {
+    ...getArgTypes('b2b-date-picker'),
+    preSelectedDate: { control: false },
+  },
   render: ({ ...args }) => {
     if (args.preSelectedDate === '') {
       return html` <div style="margin-left: 100px">
-    <b2b-date-picker
-      label=${args.label}
-      disable-past-dates=${args.disablePastDates}
-      disable-future-dates=${args.disableFutureDates}
-      disable-weekends=${args.disableWeekends}
-      .pre-selected-date="${args.preSelectedDate}"
-    </b2b-date-picker>
-  </div>`;
+        <b2b-date-picker
+          label=${args.label}
+          disable-past-dates=${args.disablePastDates}
+          disable-future-dates=${args.disableFutureDates}
+          disable-weekends=${args.disableWeekends}
+          .pre-selected-date="${args.preSelectedDate}"></b2b-date-picker>
+      </div>`;
     } else {
       return html` <div style="margin-left: 100px">
-    <b2b-date-picker
-      label=${args.label}
-      disable-past-dates=${args.disablePastDates}
-      disable-future-dates=${args.disableFutureDates}
-      disable-weekends=${args.disableWeekends}
-      pre-selected-date="${args.preSelectedDate}"
-    </b2b-date-picker>
-  </div>`;
+        <b2b-date-picker
+          label=${args.label}
+          disable-past-dates=${args.disablePastDates}
+          disable-future-dates=${args.disableFutureDates}
+          disable-weekends=${args.disableWeekends}
+          pre-selected-date="${args.preSelectedDate}"></b2b-date-picker>
+      </div>`;
     }
   },
 };
@@ -96,14 +97,5 @@ export const DisableWeekends: Story = {
 };
 
 export const preSelectedDate: Story = {
-  args: { ...meta.args, preSelectedDate: '26.11.1996' }, // Pass preSelectedDate as a string
-  play: async ({ canvasElement }) => {
-    setTimeout(async () => {
-      const datePicker = canvasElement.querySelector('b2b-date-picker');
-      const b2bDatePickerInputWrapper = datePicker.shadowRoot?.querySelector(
-        '.b2b-date-picker-input-wrapper',
-      );
-      await userEvent.click(b2bDatePickerInputWrapper);
-    }, 500);
-  },
+  args: { ...meta.args, preSelectedDate: '26.11.1996' },
 };
diff --git a/packages/core-components/src/components/date-picker/date-picker.tsx b/packages/core-components/src/components/date-picker/date-picker.tsx
@@ -180,6 +180,11 @@ export class B2bDatePicker {
 
   private handleKeyDown = (event: any) => {
     if (event.key === 'Enter') {
+      this.showHideDatePicker();
+      if (this.invalid) {
+        this.invalid = false;
+        this.showDatePicker = false;
+      }
       let value = event.target.value;
       if (value.length === 0) {
         this.clearDateInput();
@@ -327,26 +332,10 @@ export class B2bDatePicker {
               'b2b-date-picker-input-wrapper': true,
               'b2b-date-picker-input-wrapper--opened': this.showDatePicker,
               'b2b-date-picker-input-wrapper--error': this.invalid,
-            }}
-            tabindex={0}
-            onKeyDown={event => {
-              if (event.key === 'Enter') {
-                if (this.invalid) {
-                  this.invalid = false;
-                  this.clearDateInput();
-                }
-                this.showHideDatePicker();
-              }
-            }}
-            onClick={() => {
-              if (this.invalid) {
-                this.invalid = false;
-                this.clearDateInput();
-              }
-              this.showHideDatePicker();
             }}>
             <input
               type="text"
+              tabindex={0}
               class={{
                 'b2b-date-picker-input': true,
                 'b2b-date-picker-input--error': this.invalid,
@@ -355,18 +344,26 @@ export class B2bDatePicker {
               onInput={this.handleInputChange}
               onKeyDown={this.handleKeyDown}
               onBlur={this.handleInputBlur}
+              onClick={() => {
+                if (this.invalid) {
+                  this.invalid = false;
+                }
+                this.showHideDatePicker();
+              }}
             />
             <div class="b2b-icons">
               {this.userInputDate && (
                 <div
                   tabIndex={0}
                   onClick={() => {
+                    this.invalid = false;
                     this.clearDateInput();
                     this.showHideDatePicker();
                   }}
                   class="b2b-close-icon"
                   onKeyDown={event => {
                     if (event.key === 'Enter') {
+                      this.invalid = false;
                       this.clearDateInput();
                       this.showHideDatePicker();
                     }
@@ -378,7 +375,19 @@ export class B2bDatePicker {
                 </div>
               )}
 
-              <div tabindex={0} class="b2b-event-icon">
+              <div
+                tabindex={0}
+                onClick={() => {
+                  this.showHideDatePicker();
+                }}
+                onKeyDown={event => {
+                  if (event.key === 'Enter') {
+                    this.invalid = false;
+                    this.clearDateInput();
+                    this.showHideDatePicker();
+                  }
+                }}
+                class="b2b-event-icon">
                 <b2b-icon
                   aria-label={
                     this.showDatePicker