fix(calendar): fix calendar inline disabled by default

ref: DTRSD-115207 Signed-off-by: David Arsène <david.arsene.ext@ovhcloud.com>
ovh · Jul 11, 2023 · acfb192 · acfb192
1 parent 1bdd318
commit acfb192
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 31 deletions.
diff --git a/packages/components/calendar/src/js/calendar.controller.js b/packages/components/calendar/src/js/calendar.controller.js
@@ -101,6 +101,7 @@ export default class {
     addDefaultParameter(this, 'name', `ouiCalendar${this.$id}`);
 
     this.initCalendarInstance();
+    this.handleInputsVisibility();
   }
 
   handleReadonlyElement(htmlElt, hidden = false) {
@@ -120,27 +121,32 @@ export default class {
     }
   }
 
+  handleInputsVisibility() {
+    if (this.flatpickr.altInput) {
+      // Fix disabled state when there is an alt input
+      this.handleReadonlyElement(this.flatpickr.altInput);
+    }
+    // In inline mode, inputs are managed in calendar container
+    if (this.inline) {
+      const { calendarContainer } = this.flatpickr;
+      const inputs = calendarContainer.querySelectorAll('input');
+      angular.forEach(inputs, (input) => {
+        this.handleReadonlyElement(input);
+      });
+      // span AM-PM must be hide to avoid modifiying AM/PM value in readonly mode
+      this.handleReadonlyElement(
+        calendarContainer.querySelectorAll('.flatpickr-am-pm'),
+        true,
+      );
+    }
+  }
+
   $onChanges({ minDate, maxDate }) {
     if (this.flatpickr) {
-      if (this.flatpickr.altInput) {
-        // Fix disabled state when there is an alt input
-        this.handleReadonlyElement(this.flatpickr.altInput);
-        // In inline mode, inputs are managed in calendar container
-        if (this.inline) {
-          const { calendarContainer } = this.flatpickr;
-          const inputs = calendarContainer.querySelectorAll('input');
-          angular.forEach(inputs, (input) => {
-            this.handleReadonlyElement(input);
-          });
-          // span AM-PM must be hide to avoid modifiying AM/PM value in readonly mode
-          this.handleReadonlyElement(calendarContainer.querySelectorAll('.flatpickr-am-pm'), true);
-        }
-      }
-
+      this.handleInputsVisibility();
       if (maxDate) {
         this.flatpickr.set('maxDate', maxDate.currentValue);
       }
-
       if (minDate) {
         this.flatpickr.set('minDate', minDate.currentValue);
       }

diff --git a/packages/components/calendar/src/js/calendar.spec.js b/packages/components/calendar/src/js/calendar.spec.js
@@ -180,40 +180,38 @@ describe('ouiCalendar', () => {
       expect(angular.element(input).attr('disabled')).toBe('disabled');
     });
 
-    it('should enable and disable component in "inline" mode', () => {
+    it('should disable and enable component in "inline" mode', () => {
       // setup: calendar inline
       const template = `<oui-calendar model="$ctrl.model" disabled="$ctrl.disabled"
        format="d-m-Y" alt-format="H:i" enable-time inline></oui-calendar>`;
 
-      // when: component is enabled
-      const component = testUtils.compileTemplate(template, { model: 'today', disabled: false });
+      // when: component is disabled
+      const component = testUtils.compileTemplate(template, { model: 'today', disabled: true });
       const ctrl = component.controller('ouiCalendar');
       $timeout.flush();
 
-      // then: none of input are disabled
+      // then: all inputs are disabled
       const input = angular.element(component[0].querySelector('.oui-calendar__control'));
-      const altInput = angular.element(component[0].querySelector('.oui-calendar__control_alt'));
       const inputs = component[0].querySelectorAll('.numInput');
 
       expect(ctrl.inline).toBeTrue();
-      expect(ctrl.disabled).toBeFalse();
+      expect(ctrl.disabled).toBeTrue();
       expect(angular.element(input).attr('type')).toBe('hidden');
-      expect(angular.element(altInput).attr('type')).toBe('hidden');
-      expect(angular.element(altInput).attr('disabled')).toBeUndefined();
+      expect(angular.element(input).attr('disabled')).toBe('disabled');
       angular.forEach(inputs, (i) => {
-        expect(angular.element(i).attr('disabled')).toBeUndefined();
+        expect(angular.element(i).attr('disabled')).toBe('disabled');
       });
 
-      // when: component is disabled
+      // when: component is enabled
       const scope = component.scope();
-      scope.$ctrl.disabled = true;
+      scope.$ctrl.disabled = false;
       scope.$apply();
 
-      // then: all inputs are disabled
-      expect(ctrl.disabled).toBeTrue();
-      expect(angular.element(altInput).attr('disabled')).toBe('disabled');
+      // then: none of input are disabled
+      expect(ctrl.disabled).toBeFalse();
+      expect(angular.element(input).attr('disabled')).toBeUndefined();
       angular.forEach(inputs, (i) => {
-        expect(angular.element(i).attr('disabled')).toBe('disabled');
+        expect(angular.element(i).attr('disabled')).toBeUndefined();
       });
     });
   });