Inline datepicker closing issue

Topic: Inline datepicker closing issue

Revature Pro pro priority vip early access asked 3 months ago

When dealing with multiple date-pickers, if we have multiple datepickers , and if the first one is in the open state, then clicking on other datepicker, it should close the first datepicker. OnBlur event is not working properly. It is only working when we click outside the control.

And there were also other cases, when we open a date picker and click on the other elements like ck-editor or the mdb-file-upload angular plugin to upload any file. Then the expectation is, the date picker should close. But it's not closing.

  <mdb-date-picker [inline]="true" name="startDate" #startDate [options]='datePickerOptions'

Arkadiusz Idzikowski staff commented 3 months ago

Please provide some more code on which we will be able to reproduce those problems.

Revature Pro pro priority vip early access commented 3 months ago

This is the date picker options which we are using:

  dayLabels: Constants.DATE_PICKER_DAY_LABELS,
  dayLabelsFull: Constants.DATE_PICKER_FULL_DAY_LABELS,
  monthLabels: Constants.DATE_PICKER_MONTH_LABELS,
  monthLabelsFull: Constants.DATE_PICKER_FULL_MONTH_LABELS,
  todayBtnTxt: 'Today',
  clearBtnTxt: 'Clear',
  closeBtnTxt: 'Close',
  dateFormat: this.getLocaleBasedDateFormat().toLowerCase(),
  firstDayOfWeek: 'mo',
  minYear: new Date().getFullYear() - 20,
  maxYear: new Date().getFullYear() + 20,
  disableUntil: { year: new Date().getFullYear(), month: new Date().getMonth() + 1, day: new Date().getDate() - 1 },
  showTodayBtn: true,
  showClearDateBtn: true,
  markCurrentDay: true,
  markWeekends: undefined,
  disableHeaderButtons: false,
  showWeekNumbers: false,
  height: '100px',
  width: '50%',
  selectionTxtFontSize: '15px'

Arkadiusz Idzikowski staff commented 3 months ago

We need some example code/app on which we will be able to reproduce the mentioned problems with onBlur event and component closing. We just need to make sure that we use a similar code/approach to yours while debugging the component, it will help us to find the cause of the problems.

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 8.0.0
  • Device: Desktop
  • Browser: All
  • OS: Windows
  • Provided sample code: No
  • Provided link: No